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内 容 简 介 


Google 已 经 将 Kotlin 列 为 Android 开发 第 一 开发 语言 。Kotlin 与 Java 无 缝 兼容 ， 同 时 Kotlin 作为 一 
门 新 语言 ， 其 语法 极其 简洁 精练 ， 稍 微 熟 悉 之 后 ， 开 发 效率 立即 会 有 明显 提升 。 

本 书 分 为 20 章 ， 严 格 参考 Android 10 官方 开发 文档 ， 全 面 讲解 利用 Kotlin 开发 Android 应 用 的 各 种 
技术 ， 章 节 精 心安 排 、 循 序 渐进 ， 内 容 准确 、 翔 实 、 全 面 而 又 通俗 易 懂 ， 绝 不 是 术语 的 罗列 ， 也 绝 不 是 不 知 
所 云 的 翻译 。 

本 书 既 适 合 Android 应 用 开发 初学 者 、 转 向 Kotlin 编程 的 Android 应 用 开发 人 员 阅读 ， 也 适合 高 等 院 
校 和 培训 学 校 计算 技术 相关 专业 的 师 生 参考 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
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一 一 
Hi E 
写作 背景 
2020 ÆT, Android 开发 的 热度 怎么 样 了 ? 学 习 它 ， 对 就 业 和 薪资 提升 帮助 大 吗 ? 我 想 这 是 大 
多 数 人 最 关心 的 问题 。 


一 门 技术 在 职场 中 的 需求 热度 , 通过 大 型 求职 招聘 网 站 可 以 很 容易 分 析出 结论 。 大 体 可 以 这 样 
说 ， 移 动 端 开发 作为 软件 生态 的 一 部 分 ， 从 来 都 有 很 强 的 需求 。 在 2017 年 之 前 ，Android 原生 开 
发 曾 一 度 进入 低谷 ， 因 为 很 多 团队 都 选择 基于 JavaScript 的 跨 平 台 开 发 框架 。 但是， 这些 框 架 也 存 
在 一 些 先天 缺陷 ， 主 要 是 由 于 Android 与 iOS 的 巨大 差异 造成 的 (这 两 大 系统 不 可 能 统一 , 为 了 商 
业 利 益 , 必须 互相 制造 壁垒 ) 。 事实 已 经 证 明了 一 点 , 跨 平 台 开发 始终 绕 不 开 原 生 开 发 。 所 以 , 2017 
年 之 后 ，Android 原生 开发 重新 被 重视 ， 甚 至 有 国外 公司 完全 回归 了 原生 开发 。 当 前 ， 跨 平台 开发 
依然 在 迅速 发 展 ,但 是 始终 绕 不 过 原生 开发 ,而且 有 些 功 能 只 能 用 原生 开发 实现 。 所 以 ， 要 进行 移 
动 开发 ， 必 须 学 习 原 生 开发 ! 

本 书 作 者 有 15 年 以 上 软件 开发 实战 经 验 、5 年 以 上 IT 实 训 教 学 经 验 ， 深 入 了 解 各 种 技术 、 架 
构 、 设 计 模式 ， 对 IT 教育 有 丰富 的 体验 和 深入 的 思考 ， 对 各 种 技术 善于 以 通俗 易 懂 的 语言 进行 透 
彻 讲解 。 


本 书 导读 


本 书 是 《Android 9 编程 通俗 演义 》 的 姊妹 篇 , 作者 在 其 基础 上 修正 部 分 错误 , 改进 多 处 设计 ， 
将 开发 语言 由 Java FAH Kotlin, RREH Google 的 步伐 。 

“我 有 一 个 梦想 ， 让 天 下 没有 难 学 的 技术 ! ”本 书 与 《Android 9 编程 通俗 演义 》 一 书 的 写作 
风格 一 致 : 通俗 易 懂 ， 具 体 直观 ， 注 重 实践 ， 以 为 读者 节省 脑 细胞 作为 终极 目标 。 

我 一 直 希 望 能 写 出 一 本 让 读者 轻 轻松 松 学 编程 的 书 , 如 果 能 把 学 习 当 作 一 种 休闲 方式 , 那 该 是 
多 么 美好 的 事情 ! 当然 了 ， 众 口 难 调 ， 一 本 书 的 风格 不 可 能 满足 所 有 人 的 口味 。 在 本 书 创作 中 ， 作 
者 已 尽量 做 到 照顾 更 多 的 人 ,尤其 照顾 基础 差 的 人 ,并 且 尽 量 少 说 黑 话 ， 努 力 使 它 成 为 一 部 不 那么 
“ 反 人 类 ”的 作品 ， 相 信 大 部 分 人 都 很 容易 接受 这 种 风格 。 因 为 从 上 一 本 书 的 读者 反馈 看 来 ， 效 果 
很 不 错 ! 

本 书 应 该 怎么 去 阅读 ? 答案 就 一 句 话 : “看 就 行 了 ! ” 

如 果 你 是 一 个 勤快 人 ， 可 以 边 看 边 跟 着 做 ; 如 果 是 一 个 懒 人 ， 那 么 仅仅 停留 在 “看 ”上 。 你 可 
以 躺 着 看 、 坐 着 看 、 趴 着 看 ， 最 好 不 要 走路 看 ， 因 为 对 眼睛 不 好 。 

本 书 翔实 地 讲述 一 个 Android App 的 实现 过 程 ， 并 对 很 多 基础 知识 进行 了 专门 补 齐 。 实 现 App 
的 每 一 步 都 有 截图 ， 你 不 用 写 代码 ， 也 能 看 到 结果 。 所 以 ， 阅 读 体验 是 很 轻松 的 。 


本 书 从 头 至 尾 讲 了 一 个 故事 : 开发 一 个 Android 版 高 仿 QQ App 的 故事 。 本 书 的 内 容 结构 是 这 
样 的 : 
第 1 章 : Kotlin 语言 快速 入 门 。 
4 2-4 €: Android 开发 准备 与 初步 体验 。 
第 5~14 X: Andorid 基本 功能 与 界面 开发 。 
$15. 16€: 实现 仿 QQ App 单机 版 。 
第 17—19 €: Android 多 线程 、 网 络 开发 。 
第 20 章 : 实现 仿 QQ App 网 络 聊天 版。 


示例 源码 下 载 


第 14 章 之 前 讲解 基础 知识 ， 示 例 项 目 为 FistCotinapp, J& Git 仓库 地 址 是 
https://gitee.com/nnn/FirstCotlinApp.git - 

第 15 章 和 第 16 章 的 项 目 为 无 网 络 通信 的 仿 QQApp， 项 目 名 为 QQApp， 其 Git 仓库 地 址 为 
https://gitee.com/nnn/QQAppCotlin git . 

第 20 章 的 项 目 为 带 网 络 通信 功能 的 仿 QQApp， 是 从 QQAppCotlin 改进 而 来 的 ， 因 此 项 目 名 
和 包 名 皆 与 QQAppCotlin 相同 ， 其 Git 仓库 地 址 为 https://gitee.com/nnn/QQAppCotlinHttp.git。 

另外 ,为 了 模仿 QQApp 中 的 树 状 显示 效果 ,作者 还 创建 了 一 个 开源 项 目 RecyclerListTreeView， 
托管 于 GitHub ， 现 已 被 多 人 用 于 商业 项 目 。 在 本 书 中 亦 有 对 其 用 法 的 详细 介绍 ， 地 址 为 
https://github.com/niugao/RecyclerListTreeView . 

对 本 书 内 容 或 各 项 目 有 任何 疑问 ,可 在 gitee 或 GitHub 中 的 项 目 仓库 页 面 直接 留言 , 也 可 在 作 
者 的 CSDN 博客 https://blog.csdn.net/niu_gao/ 中 留言 。 


读者 对 象 


了 解 Java 语言 ， 想 学 习 Kotlin 语言 和 Android 开发 的 初学 者 
想 快速 了 解 Android 开发 模式 的 资深 开发 人 士 

有 一 定 Android 开发 基础 ， 想 进一步 提升 实战 能 力 的 开发 人 员 
需要 工程 教育 实践 案例 的 高 校 教师 
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Java 和 Kotlin 都 是 Android 的 官方 开发 语言 ， 但 是 Kotlin 已 上 升 为 第 一 开发 语言 ，Java 
届 居 第 二 。 

Kotlin 的 官网 地 址 是 https://kotlinlang.org。 

Kotlin 在 底层 与 Java 完全 兼容 ,而且 Kotlin 是 强 类 型 语言 ,编译 产物 是 Java 的 class 文件 ， 
要 基于 虚拟 机 运行 ， 所 以 Kotlin 与 Java 可 以 说 是 一 体 两 面 、 无 缝 结合。 但 是 ，Kotlin 比 Java 
更 进一步 ， 它 编写 的 程序 可 以 做 到 不 依赖 于 虚拟 机 运行 ， 这 被 称 为 Native (原生 ) 方式 ， 就 像 
C 程序 的 运行 方式 ， 当 然 比 虚拟 机 快 多 了 ， 这 种 运行 方式 对 于 移动 设备 来 说 意义 重大 ! 

如 果 说 Kotlin 代表 了 未 来 开发 语言 的 方向 也 不 算 夸 张 ， 因 为 它 很 新 ， 站 在 了 前 人 的 肩膀 
上 。 如 果 去 研究 一 下 各 种 新 出 现 的 语言 (比如 Apple 的 Swift) ， 会 发 现 它们 的 语法 规则 几乎 
完全 一 样 。 

当前 的 Java 使 用 者 大 都 还 停留 在 第 8 版 ODK 1.8) ， 因 为 很 多 库 、 框 架 或 系统 都 最 高 支 
TESI Java 8。 写 作 此 书 时 ，Java 13 就 要 出 世 了 ，Java 8 之 后 的 语法 改进 有 很 多 。 这 些 改 进 都 体 
现 了 新 式 语法 , 但 是 很 多 人 对 新 式 语法 不 熟悉 ,甚至 看 到 后 感到 别扭 ,然而 新 式 语法 思想 是 每 
个 软件 开发 者 都 应 该 理解 和 掌握 的 。 

其 实 要 掌握 新 式 语法 并 不 困难 , 还 可 以 说 是 一 件 很 轻松 的 事 。 万 变 不 离 其 宗 ， 只 要 掌握 了 
一 门 语言 ， 再 学 另 一 门 就 很 快 ， 当 然 要 有 一 个 条 件 : 有 一 本 好 的 、 适 合 的 指引 手册 。 本 书 就 是 
为 Java 开发 者 提供 的 一 本 Kotlin 快速 学 习 手 册 。 


1.1. 开发 环境 配置 


开发 环境 的 配置 仅 需 两 步 : 安装 JDK; 安装 IDE。 
1.1.1 安装 JDK 


在 地 址 “https://www.oracle.com/technetwork/java/javase/downloads/index.html” 中 选择 要 
下 载 的 DK， 见 图 1-1。 
单 击 图 1-1 箭头 所 指 图 标 ， 进 入 新 页 面 ， 在 最 下 面 能 看 到 图 1-2 所 示 的 内 容 。 
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Overview | Downloads ( Documentation | Community || Technologies. Training. 


Java SE Downloads 


& 
Æ Javy 


P dd Java Platform (JDK) 12 


Java Platform, Standard Edition 


Java SE 120.2 
dava SE 12 02 & the latest release for the Java SE Platform 
Leam more » 


15863MB Šjdk-120.2 ， 
179 57 MB. 8 d«-12 02 i 


图 1-2 
注意 一 定 要 选择 “Accept License Agreement (同意 许可 协议 ) ”， 才 可 以 用 鼠标 单 击 下 面 
的 文件 链接 。 
如 果 是 Windows， 建 议 选 择 可 执行 文件 〈 它 是 安装 包 ， 可 以 自动 设置 很 多 配置 ) ， 并 且 
在 安装 过 程 中 不 要 改变 默认 安装 路 径 ， 这 样 不 会 引起 不 必要 的 麻烦 。 
需要 注意 的 是 ，JDK 安装 到 的 路 径 中 不 能 有 中 文 ， 否 则 会 引起 莫名 其 妙 的 问题 。 默 认 安 
装 位 置 一 般 是 “系统 盘 : \Program files”。 


1.1.2 安装 IDE 


仅 有 JDK 虽然 可 以 开发 软件 , 但 是 要 手动 维护 一 切 , 可 以 借助 开发 工具 来 提高 编程 效率 。 
Kotlin 是 JetBrains 开发 出 来 的 , 而 JetBrains 的 主 业 为 开发 工具 ,所 以 选择 JetBrains 家 的 IDEA。 

IDEA 可 以 说 是 Java 编程 的 首选 IDE， 当 然 也 是 Kotlin 的 首选 ， 它 的 官网 地 址 是 
“https://www.jetbrains.com/idea/”。 下 载 IDEA 很 简单 ， 在 页 面 中 单 击 图 1-3 所 指 的 
“DOWNLOAD” 图 标 即 可 。 进 入 下 载 页面 ， 如 图 1-4 所 示 。 


Windows. macos Linux 


Ultimate Community 


For web and enterprise For JVM and Android 


development development 


图 1-4 
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有 两 个 版 本 可 供 选 择 : Ultimate 〈 旗 舰 版 ) 和 Community〈 社 区 版 ) 。 旗 舰 版 功能 强大 ， 
但 是 要 收费 ;社区 版 功能 少 ， 是 免费 的 。 选 择 社区 版 来 学 习 Kotlin 就 足够 了 。 
下 载 的 文件 是 一 个 安装 包 , 运行 它 即 可 安装 IDEA。 安 装 过 程 最 好 保持 默认 设置 ， 安 装 完 就 


可 以 用 。 


ER JDK 一 样 , 注意 IDEA 所 安装 到 的 路 径 中 不 能 有 中 文 , 否则 亦 会 引起 莫名 其 妙 的 问题 ， 


它 的 默认 安装 位 置 一 般 是 “系统 盘 : \Program files”。 
1.1.3 创建 第 一 个 Kotlin 工程 


其 实 Android 的 IDE Android Studio 就 是 IDEA。Google 
为 IDEA 开 发 了 Android 插件 ,把 它 和 IDEA 绑 定 在 一 起 ( 取 
名 为 Android Studio) 供 我 们 下 载 ， 所 以 Android Studio 的 
界面 与 IDEA 的 界面 是 一 样 的 。 
第 一 次 运行 IDEA， 会 出 现 如 图 1-5 所 示 的 页 面 。 
IDEA 的 功能 项 有 “创建 新 工程 ” Create New Project) 
“引入 工程 ” (Import Project) “打开 已 有 工程 ”(Open) 
“从 版 本 控制 系统 导入 工程 ” (Check out from Version 
Control) 。 要 创建 新 工程 ， 选 择 第 一 项 之 后 出 现 创建 工程 
向 导 ， 如 图 1-6 所 示 。 


E New Project 


B Java Project SOK: A 11 Gava version *11.0.17) 


E 
asi C. Kotlin DSL build script 


* intelli Platform Plugin Additional Libraries and Frameworks: 
Bajavs 
OD@Groowy 


[OE Intellij Platform Plugin 
LIE Kotlin//S for browser 
LIE, Kotlir/IS for Node js 
tin/JVN 


B Empty Project 
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IJ 


IntelliJ IDEA 


Version 2019.2 


十 Create New Project 
L£ Import Project 
7» Open 


片 Check out from Version Control » 


可 以 创建 多 种 类 型 的 工程 ， 仅 Kotlin 工程 就 有 多 种 形式 ， 那 么 选择 哪 一 种 呢 ? 推荐 创建 
基于 Gradle 的 Kotlin/JVM 工程 。Gradle 是 当前 如 日 中 天 的 工程 管理 软件 之 一 ( 另 一 个 与 它 齐 
名 的 是 Maven) ， 主 要 用 于 管理 Java 工程 ， 但 是 Kotlin 与 Java 是 同一 “种 族 ”， 所 以 也 适合 


使 用 Gradle 管理 。 使 用 Kotlin 可 以 开发 多 种 程序 : 


* Kotlin/JS 表示 用 Kotlin 开发 JavaScript 程序 ， 其 实 是 把 Kotlin 代码 翻译 成 JavaScript 代码 ， 


然后 才能 在 浏览 器 或 Node js 环境 中 执行 。 


© Kotlin/JVM 表示 用 Kotlin 开发 基于 JVM 的 程序 ， 也 就 是 基于 Java 虚拟 机 运行 的 程序 ， 其 
实 就 是 以 Kotlin 代替 Java 编写 代码 ， 编 译 出 的 就 是 class 文件 。 
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建议 选择 Kotlin/JVM 类 型 的 工程 ， 因 为 Kotlin 对 此 类 型 支持 得 最 好 ， 在 此 类 型 的 工程 中 
可 以 使 用 Kotlin 的 所 有 特性 。 选 好 后 单 击 Next 〈 下 一 步 ) 按钮 ， 出 现 如 图 1-7 所 示 的 内 容 。 

在 图 1-7 中 可 以 设置 程序 的 名 字 ， 在 GroupId CHO. 中 一 般 填 入 的 是 颠倒 的 域名 ， 这 里 
主要 用 于 区 分 不 同 组 织 发 布 的 程序 ， 因 为 域名 肯定 是 唯一 的 , 所 以 都 填写 域名 。 本 例 中 填 的 是 
“com.niuedu”， 随 手写 的 ， 只 是 为 了 演示 一 下 。 

ArtifactId (产品 名 ) 指 的 是 程序 名 ， 默 认 与 工程 同名 ， 所 以 最 好 不 要 用 中 文 ， 中 间 也 不 能 
用 空格 等 非常 规 字符 , 比如 取 名 “HelloKotlin” 就 合乎 规则 和 习惯 。 填 完 后 , 单 击 Next 按钮 ， 
进入 图 1-8 所 示 的 页 面 。 


1 com.niuedu 


M New Project x 
Hellokotiir CC 


1.0-SNAPSHOT Project location: [ FwworkspaceKotlimHelloKorlin zl 


1-7 1-8 


可 以 修改 工程 的 名 字 和 工程 所 保存 到 的 路 径 ， 这 里 就 用 默认 的 路 径 ， 单 击 Finish GER) 
按钮 ，Gradle 会 根据 配置 自动 生成 一 个 工程 ， 同 时 IDEA. 会 进入 编辑 模式 ， 如 图 1-9 所 示 。 


5 
H 
Ed 
a 
B 
i 
E 


* 


s Scanning files to index... 


- Bl Terminai 
加 
图 1-9 


整个 工作 区 的 构成 非常 主流 化 , 左边 是 工程 目录 ,右边 是 内 容 编 辑 区 (现在 没有 打开 任何 
文件 ) 。 注 意 下 面 的 状态 栏 ， 左 边 这 个 小 图 标 是 切换 左右 竖 向 工具 条 的 开关 ， 初 用 者 如 果 不 小 
心 点 ， 就 会 找 不 着 某 些 窗口 。 右 边 是 进度 条 ， 要 十 分 注意 这 个 地 方 ， 如 果 此 处 有 进度 条 或 文字 
出 现 ， 则 表示 IDEA 正在 忙 着 做 什么 事 ， 此 时 最 好 不 要 动工 程 中 的 文件 ， 等 IDEA 忙 完了 ， 再 
编辑 文件 。 尤 其 是 第 一 次 创建 工程 ， 可 能 需要 很 长 时 间 ， 因 为 Grade 工程 会 严重 依赖 网 络 ， 
自动 下 载 很 多 文件 ， 包 括 管理 工程 的 插件 以 及 工程 所 依赖 的 库 ， 如 果 网 速 慢 〈 这 是 很 可 能 的 ， 
因为 文件 仓库 服务 器 在 国外 ) ， 就 可 能 需要 漫长 的 等 待 。 如 果 工 程 创 建 不 成 功 ， 十 有 八 九 是 因 
为 网 络 问题 导致 某 些 文件 没有 下 载 成 功 ， 这 时 就 需要 重 试 ODEA 会 提示 重 试 ) 下 载 。 
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下 面 了 解 一 下 工程 的 组 织 结构 。 
1.1.4 工程 组 织 结构 


当 工程 创建 成 功 后 ， 可 以 看 到 图 1-10 这 样 的 目录 结构 。 

稍微 解释 一 下 : gradle, idea, grade 这 三 个 文件 夹 是 
IDEA 自己 产生 的 ， 用 于 工程 管理 ， 我 们 不 用 它们 。 

src 下 是 工程 源码 和 非 源 码 文件 的 保存 地 , 但 是 不 能 随便 
放 这 些 文件 , sre/main 下 存放 的 是 源码 , java 下 存放 的 是 Java 


/ build gradle 


源码 ，kotlin 下 存放 的 是 kotlin JJ, resources 下 存放 的 是 非 igradie properties 

源码 文件 ， 比 如 图 片 、 配 置 文件 等 。test 与 main 的 目录 结构 “| sonare 

相同 ，test 起 什么 作用 呢 ? 它 下 面 存放 的 是 单元 测试 代码 。 tt 
注意 ! 这 种 目录 结构 是 固定 的 ， 不 要 试想 通过 一 些 配置 -— 


来 改变 目录 的 名 字 或 作用 , 这 种 理念 名 日 “约定 大 于 配置 ”。 图 1-10 
根 目录 下 的 build.gradle 文件 是 整个 工程 管理 的 核心 文件 ， 因 为 它 是 工程 的 配置 文件 ， 当 
前 它 的 内 容 是 这 样 的 : 


plugins { 
id 'java' 
id 'org.jetbrains.kotlin.jvm' version '1.3.41' 


) 


group 'com.niuedu' 
version '1.0-SNAPSHOT' 


sourceCompatibility - 1.8 


repositories ( 
mavenCentral() 


) 


dependencies ( 
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8" 
testCompile group: 'junit', name: 'junit', version: '4.12' 


) 

compileKotlin ( 
kotlinOptions.jvmTarget = "1.8" 

) 

compileTestKotlin ( 
kotlinOptions.jvmTarget = "1.8" 


} 


这 些 代 码 是 用 Groovy 语言 编写 的 ， 配 置 了 工程 的 一 些 工具 或 参数 ， 比 如 工程 管理 所 需 插 
件 (Plugins)、 源 码 兼容 性 (Source Compatibility)、 仓 库 (Repositories)、 依 赖 的 库 (Dependencies) 
等 。 改 动 比较 多 的 是 依赖 库 。 
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至 于 根 目录 下 的 其 他 文件 , 都 是 与 Gradle 相关 的 配置 文件 或 脚本 工具 , 也 是 自动 生成 的 ， 
我 们 不 需要 关心 。 

虽然 工程 下 有 这 么 多 文件 ,但 是 这 个 工程 是 空 工程 ， 因 为 没有 实质 的 程序 代码 ， 下 面 就 来 
添加 代码 完成 第 一 个 程序 。 


1.1.5 添加 代码 


与 Java 相似 , 先 创建 一 个 包 , 在 包 下 再 创建 文件 , 与 Java 不 同 , main 函数 不 用 写 在 类 中 ， 
直接 作为 全 局 函数 即 可 。 
首先 创建 一 个 包 ， 见 图 1-11。 


图 1-11 
用 鼠标 右 击 “kotlin” 目 录 ， 在 弹出 的 快捷 菜单 中 选择 “New” 一 “Package”， 出 现 图 


1-12 所 示 的 界面 。 在 这 里 填 上 包 名 , 单 击 “OK” 按 钮 , 会 在 main/java 下 创建 com.niuedu 包 ， 
在 包 上 右 击 ， 弹 出 如 图 1-13 所 示 的 快捷 菜单 。 


LIESS = 
Enter new package name: " n E es k 
com.niuedd jav CUuhshn.c # Scratch File 
Cancel M L gus ries 
图 1-12 图 1-13 
选择 “Kotlin File/Class” 之 后 ,出现 图 1-14 所 示 的 界面 。 New Kotiin Fle/Closs 


接 下 来 选择 所 创建 文件 的 类 型 ， 填 入 文件 名 |f eload 
“HelloApp”， 选 择 “File” 并 双击 ， 会 在 main/kotlin/ Fi 


f Class 


com.niuedu 下 添加 文件 HelloApp kt。 编 辑 此 文件 ， 最 终 内 容 eese 
如 下 : ^f Enum class 


/& Object 


package com.niuedu 


图 1-14 


fun main() ( 
printlin("Hello world!") 
} 


Main0) 函 数 很 简单 ， 其 内 容 是 打印 一 条 文本 。 代 码 有 了 ， 如 何 运行 呢 ? 请 看 下 节 讲 解 。 
1.1.6 ”运行 程序 


与 Java 工程 一 样 ， 需 要 先 配置 运行 方式 。 单 击 图 1-15 所 示 的 位 置 ， 进 入 配置 页 面 。 
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WiueduMelloApp.kt [HelloKotlin.main] - IntelliJ IDEA 


^. | Add Configuration... 


Open 'Edit Run/Debug configurations’ dialog 


1-15 


~ # Templates 
GAmmonite 
4 Ant Target 
Œ Applet 
E Application 
3$ Compound 
4 Gradle. 
€ Groovy 
^I JAR Application 
A Java Scratch > Configurations avalable in Servicos 
JUnit 


Clickthe + button to create a new configuration based on templates 


K Kotiin E Confirm rerun with process termination 
K Kotlin script EZ Confirm deletion from Run/Debug popup. 
me Temporary configurations limit: 5 


图 1-16 


单 击 左 上 角 的 “+” 图 标 ， 添 加 一 条 运行 方式 。 选 择 正 确 的 方式 ， 这 里 应 选 “Kotlin”， 
如 图 1-17 所 示 。 


Wl Run/Dcbug Configurations. 
* ^ t 
| Add New Configuration 


Click the + button to create a new configuration based on templates | 
= Ammonite 


Ë Ant Target 
7 Applet 
可 Application 
Rz Compound 
= Gradle 


® Groow 
E JAR Application 
7f Java Scratch 
| 4> JUnit 
1-17 


选择 后 则 会 出 现 如 图 1-18 所 示 的 界面 。 

将 运行 方式 取 名 为 “app”。 在 “Main class” 字 段 填 入 的 类 名 对 应 着 HelloApp.kt 文件 ， 
虽然 main 函数 是 全 局 函数 , 但 是 因为 Kotlin 代码 最 终 要 转 成 class, 所 以 它 必然 会 有 一 个 主 类 ， 
从 这 里 的 类 名 可 以 看 出 Kotlin 文件 是 如 何 与 Java 类 对 应 的 。 

最 后 要 注意 的 是 ，“Use classpath of module ”字段 需 选择 “HelloKotlin.main”, 否则 找 不 


到 HelloAppKt 类 。 完成 后 单 击 “OK” 按 钮 ， 回 到 主页 面 ,此 时 可 以 看 到 运行 方式 旁边 的 图 标 
变 成 绿色 了 ， 如 图 1-19 所 示 。 
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WE Rur/Debug Configurations 


*-&BBHF Name: spp [Share through VCS 3 [7 Allow parallel 
di i Configuration ^ Cede C Logs 
> f Templates m Main class: com.niuedu.HelloAppKt. 

MM options: 

Program arguments: 

Working directory: 

Environment variables: 

Use eini B; HelloKotlinmain — 


RE Default (13 - SDK of Hellok 


图 1-18 


此 时 可 以 单 击 此 图 标 以 运行 程序 , 程序 的 运行 结果 就 是 在 控制 台 窗 口中 输出 一 行文 本 , 如 
图 1-20 所 示 。 


Run: E app 
> “C:\Program Files\Java\jdk-11.0.1\bin\java.exe" ... 


^ Capv »&€6G*" mna JL M 


t [HelloKotlin.main] - IntelliJ IDEA - [=] x 


Process finished with exit code 9 


» | 
PERN eToDo Teming < Bud 


图 1-19 图 1-20 
至 此 ， 第 一 个 程序 运行 成 功 ， 下 面 就 快速 学 习 一 下 Kotlin 的 语法 。 


1.2 大 道 至 简 


在 学 习 Kotlin 之 前 ， 首 先 要 记 住 一 句 话 : 新 式 语法 的 一 个 重要 目标 是 简化 。 简 化 的 目的 
是 什么 呢 ? 减少 码 字 量 ! 只 要 记 住 这 句 话 ， 就 会 觉得 那些 奇怪 的 语法 越 来 越 “ 可 爱 ”。 
首先 我 们 来 体验 一 下 什么 叫 简化 ， 比 如 下 面 这 个 Java 类 : 


class ContactInfof 
private Bitmap bitmap; 
private String title; 
private String detail; 


public ContactInfo(Bitmap bitmap, String title, String detail) ( 
this.bitmap - bitmap; 
this.title = title; 
this.detail - detail; 

} 


public Bitmap getBitmap() { 
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return bitmap; 
) 


public String getTitle() { 
return title; 


t 


public String getDetail() { 
return detail; 
) 

} 

这 种 类 的 写法 是 如 此 固定 ， 字 段 〈Field， 即 类 的 成 员 变 量 ) 名 决定 了 getter 和 setter 方法 
的 命名 ， 所 以 getter 和 setter 方法 的 名 字 是 可 以 推断 出 来 的 ，getter 和 setter 仅仅 是 对 字段 的 包 
装 , 并 没有 什么 逻辑 在 里 面 , 这 跟 直接 暴露 字段 有 什么 区 别 ? 我 们 可 不 可 以 改进 一 下 , 把 getter 
和 setter 省 略 掉 呢 ? 

class ContactInfo( 

public Bitmap bitmap; 
public String title; 
public String detail; 


public ContactInfo(Bitmap bitmap, String title, String detail) ( 
this.bitmap - bitmap; 
this.title - title; 
this.detail - detail; 


) 
字段 变 成 了 public， 但 是 与 之 前 的 代码 最 终 没有 什么 实质 的 不 同 。 
这 里 要 解释 一 下 , 虽然 直接 暴露 字段 不 符合 封装 的 思想 , 但 是 可 以 改进 一 下 编译 器 ,把 这 
些 字段 当 作 属性 ， 自 动 编译 出 getter、setter 和 对 应 的 字段 变量 。 
继续 研究 : 构造 方法 的 写法 似乎 也 可 以 省 略 。 因 为 所 有 字段 的 值 都 需要 通过 构造 方法 的 参 
数 传 进 来 , 所 以 构造 方法 的 参数 与 字段 是 一 一 对 应 的 , 而 且 习 惯 上 我 们 还 喜欢 让 参数 名 与 字段 
名 相同 。 可 以 试 着 改进 一 下 Java 语法 ， 支 持 下 面 这 种 写法 : 
class ContactInfo(public Bitmap bitmap, 
public String title, 
public String detail) { 
} 
直接 把 构造 方法 与 类 声名 结合 起 来 , 让 编译 器 根据 构造 参数 创建 字段 。 于 是 ,来 到 了 Kotlin 
的 世界 : 


class ContactInfo(val bitmap: Bitmap,val title: String, val detail: String ){} 
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Æ Kotlin P, A val 定义 常量 、var 定义 变量 ,常量 或 变量 的 类 型 放 在 符号 名 后 面 ， 并 用 冒号 分 
隔 开 ， 这 一 点 与 Java 很 不 相同 。 


Kotlin 的 目标 是 什么 ? 少 写字 ! 既然 类 的 内 容 是 空 的， 就 把 大 括号 也 省 略 。 所 以 ， 这 样 写 
也 行 〈 注 意 ， 最 后 不 必 加 分 号 ，Kotlin 不 喜欢 分 号 ) : 


class ContactInfo(val bitmap: Bitmap,val title: String, val detail: String ) 


1.3 万 变 不 离 其 宗 


虽然 代码 简化 了 ， 但 是 什么 也 没 少 ， 表 面 上 再 怎么 变化 ， 底 层 的 实质 永恒 如 一 。 

就 拿 上 一 节 的 Kotlin 类 定义 来 说 ， 看 起 来 只 有 一 行 ， 实 质 上 编译 出 的 class 代码 中 什么 也 
没 少 ,所 以 写 的 时 候 把 一 些 能 省 的 代码 省 了 ， 其实 是 留 给 了 编译 器 去 完成 。 所 以 要 记 住 ,只 是 
表现 形式 变 了 ， 该 有 的 东西 一 样 都 不 少 ， 这 叫 万 变 不 离 其 宗 。 

那么 哪些 代码 能 省 呢 ? 答案 很 简单 : 能 推导 出 来 的 代码 就 能 省 ! 举 一 个 例子 : Lambda 表 
达 式 。 其 实 Java 8 中 已 经 支持 Lambda 了 ， 可 以 说 Lambda 是 新 式 语 法 中 的 一 个 重要 语法 糖 。 
初 接触 Lambda 的 人 会 感到 很 迷惑 ， 主 要 是 因为 它 的 语法 ， 虽 然 知道 它 的 作用 跟 函 数 一 样 ， 但 
是 看 起 来 却 很 不 像 函 数 ， 比 如 下 面 这 段 Java: 

fab.setOnClickListener(view -> Snackbar.make(view, "", 
Snackbar.LENGTH LONG)); 

这 是 Android 中 常见 的 设置 侦 听 器 的 代码 ，“fab” 是 一 个 按钮 ，setOnClickListener() 方 法 
用 于 设置 响应 按钮 单 击 事件 的 侦 听 器 , 侦 听 器 是 一 个 类 ,主要 作用 就 是 包含 一 个 回调 方法 ， 当 
然 可 以 用 Lambda 来 代替 侦 听 器 类 ， 因 为 这 可 以 少 写 很 多 代码 。 

小 括号 里 就 是 一 个 Lambda， 怎 么 解读 这 个 Lambda 呢 ? 首先 它 是 一 个 函数 当然 准确 地 
说 它 是 一 个 函数 对 象 ， 但 现在 不 必 深 究 ) ， 定 义 一 个 函数 必须 具备 四 要 素 : 函数 名 、 参 数 、 函 
数 体 、 返 回 值 类 型 。 那 么 这 个 Lambda 具备 这 些 要 素 吗 ? 当然 具备 了 ， 万 变 不 离 其 宗 ! 

首先 说 函数 名 。Lambda 就 是 匿名 函数 ， 虽 然 有 名 字 ， 但 是 因为 用 不 到 ， 所 以 匿名 了 。 再 
说 参数 ，“->” 左 边 是 参数 、 右 边 是 函数 体 。 返 回 值 也 是 存在 的 ， 但 不 必 像 一 般 函 数 那样 明确 
声明 ， 而 是 靠 推导 而 得 。 如 何 推导 呢 ? 看 函数 体 最 后 一 条 语句 的 返回 值 类 型 。 

其 实 可 以 让 Lambda 看 起 来 更 接近 一 般 函 数 ， 比 如 参数 放 在 小 括号 里 、 函 数 体 放 在 大 括号 
里 ， 并 为 参数 增加 类 型 ， 具 体 如 下 : 

fab.setOnClickListener((View view) -> { 


Snackbar.make(view, "", Snackbar.LENGTH LONG); 
Hi 


虽然 看 起 来 稍微 顺眼 点 了 ， 但 是 我 们 的 原则 是 能 省 就 省 ， 所 以 前 面 的 写法 才 是 更 好 的 。 
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如 果 这 段 代 码 改 用 Kotlin 实现 ， 会 如 何 呢 ? 请 看 : 
fab.setOnClickListener ( view 一 > 
Snackbar.make(view, "", Snackbar.LENGTH LONG) 

) 

Kotlin 也 支持 Lambda， 而 且 看 起 来 与 Java 的 写法 区 别 不 大 ， 唯 一 的 区 别 就 是 Lambda 的 
所 有 部 分 都 放 在 大 括号 中 。 这样 的 语法 又 带 来 一 个 好 处 : Kotlin 可 以 更 进一步 ， 把 简化 做 到 极 
致 一 一 连 方法 调用 的 小 括号 都 省 掉 ， 因 为 方法 setOnClickListener0 的 参数 只 有 一 个 ， 且 其 内 容 
都 放 在 了 大 括号 中 ， 所 以 可 以 将 小 括号 省 掉 ， 编 译 器 依然 可 以 判定 此 种 形式 的 函数 调用 语法 。 

现在 我 们 知道 了 新 式 语法 的 简洁 是 靠 编译 器 自动 推导 的 ， 那 么 推导 是 如 何 进 行 的 呢 ? 

有 时 很 简单 ， 比 如 定义 变量 : 


var aStr-"" 


根据 初始 值 ， 一 下 就 推导 出 aStr 的 类 型 是 字符 串 。 但 是 ， 如 果 像 下 面 这 样 定义 变量 呢 ? 

var bStr = null 

这 就 不 允许 了 ， 因 为 初始 值 null 不 属于 任何 类 型 ， 推 导 不 出 bStr 的 类 型 ， 而 强 类 型 语言 
是 不 允许 在 编译 阶段 有 不 确定 的 变量 类 型 ， 所 以 此 时 必须 明确 指定 类 型 : 

var bStr:String? = null 


为 什么 类 型 后 面 多 了 一 个 问号 ? 后 文 会 有 详细 解释 。 
为 了 让 大 家 快速 入 门 ， 下 节 将 对 新 式 语法 的 特征 做 一 个 总 结 。 


1.4. 新 式 语法 特征 


下 面 是 对 新 式 语法 共有 特征 的 一 个 总 结 , 虽然 并 不 全 面 , 但 是 用 于 快速 理解 和 学 习 是 没有 
问题 的 。 

(1) 不 需要 分 号 。 

只 有 想 在 同一 行内 放 多 条 语句 时 ， 才 需要 用 分 号 来 分 隔 。 

(2) 使 用 明确 的 关键 字 定义 方法 ， 而 不 是 根据 语法 来 辨别 。 

比如 : “fun sum(a: Int , b: Int):Int ( return a+b }” , Kotlin 使 用 “fun” 关 键 字 定义 函数 和 
方法 。 

G) 使 用 明确 的 关键 字 定 义 变量 ， 而 不 是 根据 语法 来 辨别 ， 并 且 对 常量 〈 也 可 叫 只 读 变 
量 ) 和 变量 用 关键 字 进 行 明确 的 区 分 : 

© vr 表示 定义 变量 ， 比 如 : “var paraml: Int=12”。 

* val 表示 定义 常量 ， 比 如 : “valparam2: String? = null” o 
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(4) 方法 或 函数 的 返回 值 类 型 放 在 后 面 ， 使 用 “:” 分 隔 。 

比如 : “fun onOptions(): Boolean ( return true }”， 其 中 Boolean 是 函数 的 返回 值 类 型 。 
(5) 变量 和 常量 的 类 型 放 在 后 面 ， 使 用 “:” 分 隔 。 

比如 : “var paraml: Int= 12”， 其 中 “Int” 是 变量 类 型 。 

(6) 不 再 完全 忠诚 于 面向 对 象 。 

支持 全 局 函数 。 既 可 以 在 类 外 面 定义 函数 ,也 可 以 把 函数 保存 在 变量 中 , 还 可 以 定义 函数 


类 型 ， 跟 C/C++ 一 样 。 


(7) 支持 Lambda 表达 式 ， 使 语法 精简 再 精简 。 

可 以 发 挥 想 象 力 ， 试 着 写 出 最 少 的 代码 ， 只 要 编译 器 能 把 它 识 别 出 来 即 可 。 
(8) 定义 变量 时 可 省 略 类 型 。 

前 提 是 编译 器 可 以 根据 其 他 内 容 推导 出 来 ， 如 果 推 导 不 出 来 ， 就 不 能 省 略 。 


(9) 可 以 在 字符 串 中 嵌入 表达 式 ， 比 字符 串 的 格式 化 函数 更 方便 。 
比如 Java 中 这 样 输出 格式 化 字符 串 : 


String strName = "Xt"; 

String str = String.format("Hi,$s",strName); 
而 在 Kotlin 中 这 样 写 即 可 : 

val strName = " 老 王 " 

val str = String.format("Hi,$(strName)") 


fE Kotlin H, UA “S0” IUESRON AX. 


C100. 将 可 为 空 和 不 可 为 空 作 为 两 种 类 型 对 待 ， 赋 值 时 需要 类 型 转换 。 
可 空 类 型 与 不 可 空 类 型 以 “?” 来 区 分 。 
这 样 做 主要 是 为 了 消除 “ 空 指针 异常 ”。 编 译 器 无 法 自动 消除 , “ 空 指针 异常 ”但 会 时 刻 


提醒 “这 个 变量 是 不 能 为 空 的 ,不 要 给 它 赋 空 值 ……”, 最 终 还 是 靠 人 去 保证 避免 空 指针 异常 。 


比如 定义 非 空 变量 : 


var strNamel:String = "XE" 
strNamel - null 


定义 非 空 变量 后 ， 立 即 把 它 的 值 改 成 null， 会 导致 编译 错误 : “Null can not be a value of a 


non-null type String”， 意 思 是 说 “null 不 能 作为 非 null 类 型 的 值 ”。 所 以 , 要 保证 赋 给 非 空 类 
型 变量 的 值 不 为 null。 


SH 


可 以 向 可 空 变量 赋 任 何 值 ， 比 如 : 


var strName2:String? = null 
strName2 = " 老 空 " 


类 型 后 面 加 上 问号 后 ， 就 可 以 放空 值 了 ， 但 由 于 “String” 与 “String?” 不 是 同一 类 型 ， 
此 在 两 种 类 型 之 间 赋 值 时 需要 进行 转换 ， 比 如 : 
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var strNamel:String = "XE" 
var strName2:String? = " 老 空 " 
strNamel = strName2 


第 三 句 是 将 可 为 空 的 变量 值 赋 给 不 可 为 空 的 变量 ， 此 时 编译 器 会 报错 误 “Type mismatch: 
inferred type is String? but String was expected" , 意思 是 “类 型 不 匹配 : 推导 出 的 类 型 是 String?， 
但 是 期 望 的 类 型 是 Stting”， 也 就 是 说 期 望 sttName2 是 String 类 型 而 不 是 String? 类 型 。 这 时 
就 需要 明确 的 类 型 转换 了 ， 比 如 : 


strNamel = strName2!! 


两 个 叹 号 用 于 把 可 为 空 类 型 转 成 不 可 空 类 型 。 使 用 两 个 叹 号 就 是 为 了 警示 开发 者 : “要 考 
IE— F, strName2 中 的 值 能 确保 不 为 null 吗 ? ”此 时 可 能 有 人 要 问 : “strName2 虽然 是 可 为 
空 类 型 ， 但 其 值 不 是 空 啊 ， 我 都 看 到 了 ! ”你 的 确 看 到 了 , 但 是 编译 器 看 不 到 ， 因 为 一 般 情况 
下 这 些 语句 不 会 靠 得 这 么 近 ， 比 如 stNamel 和 strName2 可 以 是 类 的 字段 ， 而 
“sttNamel=stName2” 这 一 句 在 类 的 某 个 方法 中 , 此 种 情况 下 编译 器 无 法 知道 strName2 的 值 
是 否 为 null (是 运行 时 才能 确定 的 )。 

也 可 以 先 判断 strName2 是 否 为 null， 只 有 在 它 不 为 null 时 才 赋 值 给 sttNamel， 比 如 : 

var strNamel:String = "XE" 

var strName2:String? = " 老 空 " 

if (strName2 !- null) ( 


strNamel = strName2 


) 


注意 ，strName2 的 两 个 叹 号 被 省 略 了 。 为 什么 可 以 省 略 呢 ? 因为 判断 条 件 为 True 时 ， 
strName2 的 值 必然 不 是 null， 所 以 编译 器 就 自动 将 它 转 成 了 非 空 类 型 。 

OD 具有 表示 范围 的 语法 。 

比如 : “for (iin 1.4 step 2)”， 用 “..” 表 示范 围 。 

(12) 所 有 类 型 都 是 对 象 ， 不 存在 基础 类 型 ， 或 者 说 所 有 类 型 都 在 箱子 里 。 

没有 Java 中 的 int, long. char 等 ,只 有 Int, Long. Char 等 。 也 就 是 说 , 可 以 这 样 写 代 码 : 

110.equals (33) 

" 老 李 " .get (1) 

a3) 增加 “===” 操 作 符 ， 用 于 确定 两 个 变量 是 不 是 引用 同一 个 对 象 。 

“一 ”比较 两 个 对 象 的 值 是 否 相等 ， 相 当 于 调用 equals0， 而 “===” 相 当 于 C 语言 中 的 
直接 比较 指针 。 


(14) 显 式 类 型 转换 。 

编译 器 一 般 不 帮 我 们 自动 转换 类 型 , 因为 开发 者 应 该 明确 知道 每 一 个 转换 的 后 果 , 所 以 大 
多 数 情 况 下 都 需要 开发 者 自己 进行 类 型 转换 。 

(15) 创建 对 象 时 不 再 用 “new”， 而 是 直接 调用 构造 方法 。 

这 个 就 不 用 解释 了 ， 原 因 很 简单 :可 以 少 打字 。 
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(160. 支持 这. else ... 表 达 式 。 
也 就 是 说 站 语 名 可 以 有 返回 值 ， 其 返回 值 就 是 子 语句 中 最 后 一 句 的 值 。 比 如 : 
var a=100 
var b=200 
val max = if (a > b) ( 
print("ret is a") 
a 

) else ( 
print("ret is b") 
b 

} 


max 会 保存 于 表达 式 的 值 ， 如 果 a ACT b, max 就 等 于 a， 否 则 max 就 等 于 b。 要 实现 同 
样 的 效果 ，Java 就 要 写 得 复杂 一 点 。 另 外 ， 有 了 这 样 的 语法 ， 就 不 必 支持 三 目 运算 符 了 ， 比 
如 “a>b?c:d” 的 效果 可 以 用 Kotlin 实现 : *if(a»b)celsed" . 


(17). 用 when 代替 switch...case。 
when LU switch...case 简洁 一 些 ， 比 如 : 


val a=1 
when (a) ( 
1 -> print("a == 1") 
2» 
print("a == 2") 
print("a !- 1") 
) 
else -> ( 
print("a 不 是 i 也 不 是 2") 
) 
} 


每 个 判断 不 需 带 “case” 关 键 字 , 每 个 子 语句 中 也 不 用 写 break。 注 意 ,else 对 应 switch...case 
中 的 default。 
when 比 switch...case 强大 得 多 , switch...case 只 能 比较 是 否 相 等 , 而 when 还 可 以 判断 目标 
变量 的 值 是 否 在 一 个 范围 内 ， 比 如 : 
val a= 199 
when (a) { 
in 1..10 -> print("a 在 1 到 10 内") 
100,101 -> print ("a 的 值 是 100 或 101") 
tin 10..20 -> print ("a 不 在 10 与 20 之 间 ") 
else -> print ("以 上 都 不 对 ") 
} 


when 后 也 可 以 不 带 目 标 变 量 ， 此 时 它 判 断 每 个 case 是 否 为 真 ， 比 如 : 
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val a = 100 

when ( 
a.isOdd() -> print("a 是 奇数 ") 
a.isEven() -> print("a 是 偶数 ") 
else -> print("a Æ?") 

} 


也 就 是 说 ，“->” 前 面 的 部 分 为 真 时 ， 其 子 语句 就 会 被 执行 。 
when 语句 也 可 以 像 让 语句 那样 作为 表达 式 。 


(18) 在 类 中 定义 的 成 员 变量 其 实 是 属性 ， 而 不 是 字段 。 
比如 : 
class Message( 
var title:String? - null 
var content:String? = null 
var timestamp:Long - 0 
} 
此 类 有 三 个 属性 ， 既 然 叫 属性 ， 也 就 是 说 它们 对 应 Java 的 getter 和 setter 方法 。 当 然 ， 也 
可 以 定制 getter 和 setters 注意 , 在 getter 和 setter 中 不 能 再 访问 属性 (比如 不 能 在 title 的 getter 
或 setter 代码 中 使 用 title) ， 这 样 会 引起 无 限 递归 调用 ， 那 要 使 用 这 个 对 应 属性 的 值 时 怎么 办 
呢 ? 每 个 属性 都 有 一 个 不 可 见 的 字段 存储 属性 的 值 ， 这 个 字段 可 以 用 “field” 访 问 ， 比 如 : 
class Message( 


var title: String = "通知 " 
get() = field + ":"  // MX EDBUÉ EEEROV CS 


var content: String? = "从 明天 起 ， 一 天 工作 不 要 超过 25 小 时 ! " 
set(value) ( 
field - value 


) 


var timestamp:Long - 0 
} 


可 以 看 到 getter 或 setter 不 需要 定制 时 可 以 省 略 。 
a9) 有 默认 构造 方法 。 
默认 构造 方法 是 直接 在 类 名 后 加 小 括号 来 定义 ， 比 如 : 


class Message (var title: String=" 通 知 "，var content: String?)( 
var timestamp:Long = 0 
} 
title 和 content 不 仅仅 是 默认 构造 方法 的 参数 ， 同 时 也 是 类 的 属性 。 类 的 构造 方法 没有 方 
法 主体 (body) ， 如 果 需 要 定制 其 内 部 的 程序 逻辑 怎么 办 呢 ? 很 简单 ， 实 现 init 代码 块 ， 示 例 
如 下 : 
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class Message (var title:String = "通知 "，var content: String?)( 
var timestamp:Long = 0 


init ( 
title += ":" 
t 
} 


(200 非 默认 构造 方法 必须 调用 默认 构造 方法 。 

非 默认 构造 器 不 再 与 类 名 同名 ， 其 名 字 固 定 ， 叫 作 constructor。 可 以 有 多 个 constructor 77 
法 ， 它 们 之 间 以 不 同 的 参数 来 区 分 。 

对 默认 构造 器 ， 可 以 直接 调用 ， 也 可 以 间接 调用 ， 总 之 得 调用 一 下 。 例 如 : 


class Message (var title:String = "ÑA", var content: String?)( 
var timestamp:Long = 0 


init ( 
title += ";" 
) 


// AHER 

constructor (title:String, timestamp:Long) : this (title, "不 知道 通知 内 容 ") { 
this.timestamp = timestamp 
this.content = "最 终 内 容 为 : $title-$content" 


} 

非 默认 构造 方法 调用 默认 构造 方法 的 语法 有 点 像 类 的 继承 。 

(21) 枚 举 也 是 类 。 

枚 举 类 中 的 每 个 枚 举 都 是 这 个 类 的 一 个 实例 , 在 定义 类 的 同时 把 实例 也 定义 出 来 , 并 且 不 
能 再 通过 类 创建 新 的 实例 ， 也 就 是 说 其 实例 的 数量 是 固定 的 。 看 下 面 的 例子 : 

enum class NUM( 


ONE, TWO, THREE 
) 


这 个 跟 我 们 常见 的 枚 举 没 有 太 大 区 别 ， 但 它 是 类 ， 所 以 可 以 带 属性 和 方法 ， 比 如 : 


enum class Color(val rgb: Int) { 
RED(OxFF0000), 
GREEN (0x00FF00) , 
BLUE (0x0000FF) 

} 


此 枚 举 带 有 一 个 属性 rgb， 所 以 在 定义 枚 举 实例 (RED, GREEN, BLUE) 时 ， 为 它们 的 
构造 方法 传 入 了 参数 。 
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(220 属性 也 可 以 被 覆盖 (Override) 。 

属性 的 本 质 是 函数 ， 当 然 可 以 被 覆盖 。 

(23) 接口 中 可 以 定义 属性 。 

属性 的 本 质 是 函数 ， 当 然 可 以 定义 属性 ， 但 是 属性 是 抽象 的 ， 子 类 必须 履 盖 〈Override) 这 
个 属性 。 

(24) 可 以 在 不 继承 类 的 情况 下 为 类 添加 方法 。 

这 叫 “扩展”。 属 性 的 本 质 是 方法 , 支持 扩展 , 但 是 扩展 出 来 的 属性 没有 对 应 的 字段 ， 所 
以 只 能 实现 getter 方法 。 它 只 能 是 val， 不 能 赋 初 始 值 。 

此 特性 一 般 用 在 别人 写 的 类 上 。 对 于 自己 写 的 类 ， 想 怎么 改 就 怎么 改 ， 没 有 必要 用 扩展 。 

(25) 类 型 转换 使 用 “as” 关 键 字 。 

看 一 个 例子 : 


val a:String = Color.RED as String 


这 里 借用 了 前 面 定义 的 枚 举 。 注 意 ， 这 个 转换 会 返回 null， 因 为 两 种 类 型 不 匹配 。 
(Q6) 当 连 续 调用 某 个 对 象 的 多 个 方法 时 ， 可 以 让 对 象 只 出 现 一 次 。 
Kotlin 的 做 法 是 放 在 “with” 开 头 的 代码 块 中 ， 看 以 下 示例 : 
with(fab)( 
clearCustomSize() 
setCompatElevationResource (100) 


show() 


) 
fab 是 一 个 对 象 ， 大 括号 中 三 个 方法 都 是 它 的 成 员 函 数 ， 这 种 方式 就 相当 于 如 下 代码 : 


fab.clearCustomSize() 
fab.setCompatElevationResource (100) 
fab.show() 


很 明显 ， 就 是 为 了 少 打 点 字 ， 但 有 时 也 少不了 太 多 。 
(27) 支持 全 局 函数 。 


1.5 Kotlin 独特 语法 


(1) 表达 式 可 以 作为 函数 的 主体 。 
比如 : fun sum(a: Int, b: Int) =a + be 


(2) Java 下 的 void TE Kotlin 中 变 为 Unit: 
比如 : “fun exitNow():Unit { retum Unit }”， 其 实 此 函数 的 参数 与 返回 语句 都 可 以 删 掉 。 
注意 ，Unit 也 是 一 个 对 象 。 
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(3) 不 定 参 数 使 用 关键 字 vararg 定义 ， 在 函数 内 以 数组 对 待 。 
这 一 点 跟 Java 一 样 ， 看 一 个 例子 : 


fun asList(vararg ts: String): List<String> { 
for (t in ts) // ts 起 一 个 Array 


return ... 


} 


(4) 可 以 为 表达 式 加 个 标签 (标签 就 是 表达 式 的 名 字 ) ， 从 而 直接 跳 转 到 表达 式 位 置 执行 。 
这 个 功能 只 用 在 三 个 指令 上 : break, continue, returne 


下 面 的 例子 是 break 或 continue 的 位 置 标签 : 


loop? for (i in 1..100) ( 
for (j in 1..100) ( 
BE (£4) 1 
break8loop 
) 


) 
本 来 break 应 该 打破 内 部 循环 ， 加 了 标签 便 变 成 了 打破 外 部 循环 。 


(5) Lambda 中 的 retum 会 导致 外 部 函数 的 返回 ， 如 果 仅 想 从 Lambda 中 返回 ， 要 用 到 
标签 。 
看 一 个 retum 的 例子 : 


fun foo() ( 
listOf(1, 2, 3, 4, 5).forEach( 
if (it -- 3) return 
print (it) 
} 
print(" done with explicit label") 
} 


forEach 后 面 是 一 个 Lambda, retum 出 现在 Lambda 中 。 猜 一 下 ， 这 个 retum 是 从 哪里 返 
回 的 。 从 Lambda 返回 ? 这 种 写法 在 Kotlin 中 是 从 foo0 返 回 ! 相当 于 在 foo0 中 调用 return。 那 
么 如 何 从 Lambda 中 返回 呢 ? 这 样 做 : 


fun foo() ( 
listOf(1, 2, 3, 4, 5).forEach lit@{ 
if (it -- 3) 
return8lit 
print(it) 
} 
print(" done with explicit label") 
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return 后 加 了 标签 ， 变 成 了 退出 到 forEachO0， 也 就 相当 于 从 Lambda 返回 。 
注意 ，Lambda 的 参数 如 果 只 有 一 个 ， 就 可 以 在 定义 时 省 略 ， 然 后 通过 “it” 引 用 。 


C6) 可 以 通过 主 构造 方法 的 参数 为 类 直接 定义 属性 。 
这 个 特性 前 面 已 经 接触 过 。 其 实 还 可 以 在 参数 前 加 访问 性 修饰 (public、private 等 关键 字 )， 
例如 : 
class ContactInfo(public val bitmap: Bitmap, 
private val title: String, 
val detail: String) 
(7) 具体 类 默认 是 final 的 ， 不 能 被 继承 ， 如 果 需 要 被 继承 ， 就 要 用 open 修饰 。 
这 点 与 Java 相反 ，Java 类 默认 是 可 以 被 继承 的 。 抽 象 类 默认 肯定 是 open， 因 为 抽象 类 必 
须 被 继承 才 有 存在 的 意义 。 


(8) 在 类 内 部 定义 的 类 有 两 种 : 堪 套 类 和 内 部 类 。 

嵌 套 类 相当 于 Java 中 的 静态 内 部 类 , 不 能 使 用 外 部 类 的 this。 内 部 类 必须 以 “inner class" 
定义 ， 相 当 于 Java 中 的 私有 非 静态 内 部 类 ， 可 以 访问 外 部 类 的 this。 跟 Java 一 样 ， 支 持 匿 名 
内 部 类 。 


(9) 所 有 类 都 从 Any 派生 。 
Any 就 是 Java 中 的 对 象 (Object) 。 


(10) 方法 默认 是 final 的 ， 所 以 要 想 被 子 类 履 盖 〈Ovemide) ， 需 用 open 修饰 。 

这 个 设计 与 类 一 致 。 

(11) 要 想 让 类 的 属性 或 方法 属于 类 型 而 不 是 实例 ， 应 在 “companion object (伴随 对 象 / 
伴生 对 象 ) ”代码 块 中 定义 。 

看 如 下 示例 代码 : 

class MyClass { 

companion object ( 
fun create(): MyClass - MyClass() 


) 
) 


方法 create0 就 是 MyClass 的 一 个 类 型 方法 (也 就 是 静态 方法 ) ， 可 以 这 样 调用 : 
val instance = MyClass.create() 


(12) 用 object 创建 内 部 匿名 类 。 
看 这 个 例子 : 


window.addMouseListener(object : MouseAdapter() { 
override fun mouseClicked(e: MouseEvent) ( 
clickCount++ 
} 


override fun mouseEntered(e: MouseEvent) { 
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enterCount++ 
} 
H) 
这 是 Android 中 常见 的 语法 ， 设 置 事件 侦 听 器 ， 这 个 侦 听 器 类 必须 从 MouseAdapter 类 派 
生 。 语 法 看 起 来 与 Java 很 相似 ， 最 大 的 差别 就 是 多 了 “object ”, 实际 上 它 表示 定义 一 个 “对 
象 表达 式 ”, 内 部 匿名 类 实际 上 是 把 类 的 定义 与 创建 实例 合 在 一 起 了 , 因为 最 终 创建 的 是 一 个 
实例 ， 所 以 用 object 来 标识 。 


(30 语法 上 直接 支持 单 例 模式 。 

要 创建 一 个 全 局 唯一 静态 对 象 ( 也 就 是 单 例 ) ， 比 Java 下 简单 得 多 。 其 做 法 是 用 关键 字 
object 而 不 是 class 来 定义 一 个 类 。 这 相当 于 先 定义 一 个 类 ， 然 后 用 它 创建 对 象 ， 并 想 办 法 保 
证 此 对 象 在 进程 中 是 唯一 的 。 下 面 是 创建 单 例 的 示例 : 

object DataProviderManager { 

fun registerDataProvider(provider: DataProvider) ( 


ee 
} 


val allDataProviders: Collection<DataProvider> 
get() = // ... 
} 
下 面 是 使 用 它 的 代码 ， 可 以 直接 通过 类 名 调用 方法 ， 而 不 用 先 创建 实例 , 因为 它 本 身 就 是 
一 个 实例 : 


DataProviderManager.registerDataProvider(...) 


(14) 可 以 在 一 个 类 中 为 另 一 个 类 定义 扩展 : 

“扩展 ”就 是 为 已 存在 的 类 添加 新 的 方法 或 属性 , 而 那个 类 的 原 有 代码 不 会 受 影响 。 这 种 
语法 有 时 看 起 来 很 奇怪 ， 因 为 随时 可 以 干 这 种 事 ， 比 如 在 某 个 类 内 部 为 男 一 个 类 添加 方法 : 

class A ( 


fun methodOfA() ( println(" 类 A") } 
} 


class B { 
fun methodOfB() ( println(" 类 B") } 


fun A.method20fA() { 
methodOfA() 
this8B.methodOfB() 


H 


我 们 先 定 义 一 个 类 A， 它 有 一 个 方法 methodOfAQ; 再 定义 类 B， 其 中 第 二 个 方法 
Amethod2OfAO 看 起 来 是 在 了 B 中 定义 的 ， 但 实际 上 是 A 的 方法 ， 因 为 其 最 前 面 指定 了 A 的 类 名 。 


20 


第 1 章 Kotlin 快速 入 门 


注意 扩展 的 影响 范围 ， 在 上 面 的 例子 中 ，A 的 扩展 方法 只 能 在 B 中 调用 ，B 之 外 是 不 能 
用 的 ， 如 果 要 在 更 大 的 范围 内 使 用 ， 可 以 在 类 外 定义 A 的 扩展 。 


(50 可 定义 只 用 于 包含 数据 的 类 。 

这 种 类 叫 作 “数据 类 ”， 以 “data class” 修 饰 。 注 意 ， 并 不 是 说 这 种 类 不 能 包含 方法 ， 它 
的 本 质 与 普通 类 没有 区 别 ，“data” 修 饰 符 起 的 作用 是 : 为 类 添加 了 几 个 方法 ， 它 们 的 功能 分 
别 是 : 比较 值 是 否 相等 equals0) 、 求 取 Hash 码 ChashCodeQ) 、 转 字符 串 (toString0〉、 
复制 数据 的 方法 (copy0) 等 。 当 然 还 可 以 自由 添加 方法 ， 但 是 由 于 我 们 的 设计 目标 就 是 把 它 
当 作 数据 容器 ， 所 以 尽量 不 要 为 它 添加 包含 业务 逻辑 的 方法 。 

例如 : 


data class User(val name: String, val age: Int) 


Q6) 支持 封闭 类 。 

封闭 类 是 什么 ? 密封 类 的 子 类 数量 有 限 ， 这 一 点 不 同 于 Enum Class CEnum Class 的 实例 
数 有 限 ) 。 

封闭 类 要 求 子 类 必须 在 其 所 在 的 文件 中 创建 。 如 此 一 来 , 其 他 人 就 因为 不 能 修改 此 类 的 源 
码 而 无 法 创建 此 类 的 新 子 类 ， 于 是 达到 了 “封闭 ”的 目的 。 看 下 面 这 个 例子 : 

sealed class Expr 

data class Const(val number: Double) : Expr() 


data class Sum(val el: Expr, val e2: Expr) : Expr() 
object NotANumber : Expr() 


定义 了 一 个 封闭 类 Expr， 从 它 派生 了 三 个 类 ， 其 中 最 后 一 个 类 是 一 个 单 例 。 这 些 代 码 必 
须 在 同一 个 文件 中 。 


(17) 定义 函数 类 型 时 还 可 以 指定 调用 此 函数 的 对 象 。 
先 看 一 个 例子 : 


val sum: Int.(Int) -> Int = ( other -> this.plus(other) } 


sum 是 一 个 函数 常量 ， 其 类 型 是 “Int.(Int) -> Int”， 参 数 是 Int， 返 回 类 型 是 Int， 但 是 前 
面 多 了 一 个 “Int.”,， 表示 调用 此 函数 时 必须 通过 Int 类 型 的 实例 ( 叫 作 目 标 对 象 的 类 型 )， 比 
如 “44.sum(33)”。 注意 : 大 括号 内 是 Lambda, other 是 33, this 指向 44 (this 是 可 以 省 略 的 ) 。 

实际 上 sum 并 不 是 Int 的 方法 ， 但 是 这 样 定义 之 后 就 成 了 Int 的 方法 ， 跟 扩展 的 效果 很 相似 。 

再 看 一 个 例子 : 

class HTML { 

fun body() { } 
} 


fun html (init: HTML. () -> Unit): HTML { 
val html = HTML() // f/f ZEE 
html.init() // EZE RIERA Lambda KEFE 


return html 
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} 


html{ // TEES E Lambda XX TS 
body() — // W/SEGEZ$ Ef fux 
) 


定义 了 一 个 类 HTML, 并 在 类 外 定义 了 函数 html0。html0 有 唯一 的 参数 init( 是 一 个 函数 )， 
在 它 的 类 型 定义 中 指定 了 必须 通过 HTML 的 实例 调用 init. 7428. E html0 的 实现 中 也 是 这 样 
做 的 。 

最 后 是 对 html0 函 数 的 调用 ， 由 于 它 只 有 一 个 参数 ， 因 此 小 括号 被 省 略 。 其 参数 是 一 个 
Lambda, Lambda 中 调用 了 HTML 实例 的 方法 body0。 根 据 html0 函 数 的 定义 可 以 推断 出 
Lambda 中 所 调用 的 方法 所 属 的 类 ， 所 以 可 以 做 到 如 此 简洁 的 函数 调用 语法 。 这 种 语法 的 一 个 
主要 应 用 就 是 实现 “类 型 安全 的 构建 器 ”， 看 下 面 的 例子 : 


fun result() = 
html ( 

head ( 
title {+"XML encoding with Kotlin") 

) 

body ( 
hl (*"XML encoding with Kotlin"] 
p í(*"this format can be used as an alternative markup to XML") 


// PERK, TEE T HIE, ISIBE T JUPMIXOKAAEE 
a(href = "http://kotlinlang.org") (*"Kotlin") 


// ARAS 
pt 
*"This is some" 
b (*"mixed") 
*"text. For more see the" 
a(href = "http://kotlinlang.org") {+"Kotlin"} 
*"project" 
) 
p (*"some text") 


// AEF ERKE 
pi 
for (arg in args) 


*arg 


) 
以 上 是 常用 特性 中 比较 特殊 的 地 方 ， 其 余 方面 与 Java 差不多 。 
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1.6 作用 域 函数 


Kotlin 中 有 5 个 风格 相似 的 函数 , 善 用 它们 , 可 以 使 代码 更 加 简洁 , 分 别 是 letO、applyO、 
withO、run0、also0。 

这 几 个 函数 都 是 inline 函数 ， 而 且 都 是 范 型 。 比 如 let0 函 数 : 

Gkotlin.internal.InlineOnly 

public inline fun «T, R> T.let(block: (T) -> R): R ( 


contract ( 
callsInPlace(block, InvocationKind.EXACTLY ONCE) 


) 
return block(this) 


) 


注意 ， 函 数 名 “let” 前 面 指定 了 目标 对 象 的 类 型 。 不 是 所 有 的 函数 都 会 指定 目标 对 象 的 。 
这 几 个 函数 被 称 作 “ 作 用 域 函数 ”, 因为 它们 都 为 所 操作 的 对 象 创建 了 一 个 作用 域 , 在 作 
用 域 中 使 用 要 操作 的 对 象 时 可 以 把 代码 写 得 更 简捷 ， 比 如 : 
Person("Alice", 20, "Amsterdam").let { 
println(it) 
it.moveTo ("London") 
it.incrementAge() 
printl1n (it) 
} 


如 果 不 用 let 函数 ， 需 要 这 样 写 : 


val alice = Person("Alice", 20, "Amsterdam") 

println (alice) 

alice.moveTo ("London") 

alice.incrementAge () 

println (alice) 

代码 量 差不多 , 没有 体现 出 作用 域 函数 的 优势 , 但 是 代码 量 大 的 时 候 可 以 明显 看 出 作用 域 
函数 的 优势 。 

let 后 是 一 个 Lambda (是 作用 域 ), Lambda 的 参数 是 Person 实例 (是 let 所 操作 的 对 象 ) ， 
被 叫 作 “上 下 文 对 象 ”。 

这 几 个 函数 的 作用 非常 相似 , 要 正确 选择 是 有 一 定 困难 的 , 仅 看 名 字 还 不 行 。 为 了 清楚 它 
们 的 区 别 ， 需 要 从 两 方面 进行 研究 : 一 是 引用 上 下 文 对 象 的 方式 ， 二 是 返回 值 。 

在 Lambda 中 引用 上 下 文 对 象 时 ， 有 的 用 this， 有 的 用 it。run0、withO、applyO 用 this, 
所 以 在 这 几 个 函数 的 作用 域 中 要 访问 上 下 文 对 象 的 方法 或 属性 时 , 可 以 把 this 省 略 , 但 这 样 带 
来 一 个 问题 , 在 作用 域 中 不 仅 可 以 调用 上 下 文 对 象 的 方法 , 还 可 以 调用 全 局 函数 , 于 是 容易 让 
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人 分 不 清 哪个 函数 属于 谁 ,所 以 开发 者 最 好 自行 保证 在 作用 域 中 仅 调用 上 下 文 对 象 的 方法 或 属 
性 。 看 下 面 这 个 例子 : 
val adam = Person("Adam").apply { 
age - 20 // same as this.age — 20 or adam.age - 20 
city - "London" 
} 
在 代码 中 同时 修改 一 个 对 象 的 多 个 属性 值 ， 看 起 来 还 挺 舒 服 。 
在 let0 和 also0 中 使 用 it 引用 上 下 文 对 象 ， 此 时 访问 上 下 文 对 象 的 方法 或 属性 时 ， 站 是 不 
能 省 略 的 ， 因 为 站 比 this 字母 少 ， 所 以 在 不 能 省 略 对 象 的 场合 下 ， 用 it 278 — 6. 
在 返回 值 方面 ,apply0 和 also0 返 回 的 是 上 下 文 对 象 ， let0、run0、withO 返 回 的 是 Lambda 
中 返回 的 值 。 
下 面 简要 说 明 面 对 各 函数 该 如 何 抉择 。 


1.6.1 let() 


上 下 文 对 象 用 站 引用 ， 返 回 Lambda 返回 的 值 。 
letO 用 在 调用 链 的 最 后 面 ， 能 省 点 事 ， 比 如 : 
val numbers = mutableListOf("one", "two", "three", "four", "five") 


val resultList = numbers.map ( it.length J.filter ( it > 3 ) 
printin(resultList) 


VERI let 后 : 


val numbers - mutableListOf("one", "two", "three", "four", "five") 

numbers.map ( it.length ).filter ( it > 3 ).let ( println(it) ) 

还 有 一 种 用 法 ， 就 是 判断 对 象 是 否 为 空 ， 如 果 不 为 空 ， 则 执行 Lambda 中 的 代码 ， 并 将 其 
上 下 文 对 象 自动 变 为 不 可 为 空 类 型 。 示 例如 下 : 


val str: String? = "Hello" 
//processNonNullString(str) -- AXE, BUSINSCEORESCIRIMAS, M str THE 
val length = str?.let ( 
printin("let() called on $it") 
processNonNullString (it) // ZERA OK: 'it' DUBIE RIASSS 
it.length 
) 
在 let 中 一 般 放置 相关 性 比较 大 的 对 上 下 文 对 象 的 一 堆 操 作 ， 包 括 设置 属性 的 值 、 调 用 方 
法 并 对 返回 值 进行 运算 等。 
1.6.2 run() 


上 下 文 对 象 用 this 引用 ， 返 回 Lambda 返回 的 值 。 
run 的 作用 有 点 像 let, 把 对 上 下 文 对 象 相关 性 比较 大 的 操作 放 在 一 起 。run 和 let 可 以 很 自 
然 地 相互 蔡 换 ， 比 如 : 
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val service = MultiportService("https://example.kotlinlang.org", 80) 


val result = service.run { 

port = 8080 

query(prepareRequest() + " to port $port") 
) 


val letResult = service.let { 
it.port = 8080 
it.query(it.prepareRequest() * " to port $(it.port)") 
) 
run 可 以 不 在 某 个 对 象 上 调用 ， 此 时 它 的 作用 是 将 一 堆 相关 的 操作 放 在 一 起 。 当 然 也 可 以 
产生 结果 并 返回 给 某 个 变量 以 保存 下 来 ， 比 如 : 
val hexNumberRegex = run ( 
val digits = "0-9" 
val hexDigits = "A-Fa-f" 
val sign - "4-" 


Regex ("[$sign]?[$digits$hexDigits]-*") 
) 


for (match in hexNumberRegex.findAll("41234 -FFFF not-a-number")) ( 
printin(match.value) 


} 
YES, hexNumberRegex 是 一 个 常量 ， 保 存 了 run 中 Regex0 返 回 的 值 。 


1.6.3 apply() 


上 下 文 对 象 用 this 引用 ， 返 回 上 下 文 对 象 。 
在 此 函数 Lambda 中 ， 主 要 对 上 下 文 对 象 的 属性 进行 设置 ， 意 图 是 “将 这 些 参数 应 用 到 这 
个 对 象 ”， 所 以 一 般 用 于 配置 对 象 时 。 
看 下 面 的 示例 代码 : 
val adam = Person("Adam").apply ( 
age - 32 
city - "London" 
) 


1.6.4 also() 


上 下 文 对 象 用 it 引用 ， 返 回 上 下 文 对 象 。 
此 函数 一 般 用 于 调用 那些 以 上 下 文 对 象 为 参数 的 方法 , 比如 打印 上 下 文 对 象 的 属性 值 , 或 
者 将 上 下 文 对 象 的 属性 值 记 入 日 志 中 ， 而 且 不 应 该 在 Lambda 中 更 改 上 下 文 对 象 ， 比 如 : 
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val numbers - mutableListOf("one", "two", "three") 


numbers.also { println ("The list elements before adding new one: 
$it") J.add("four") 

使 用 also 的 特点 是 ， 如 果 从 调用 链 中 抽 走 also 调用 ， 不 会 影响 调用 逻辑 和 执行 结果 。 
1.6.5 with() 


上 下 文 对 象 用 this 引用 ， 返 回 Lambda 返回 的 值 。 
with 的 作用 可 以 理解 为 : “用 这 个 对 象 ， 做 点 事 ”。 当 前 面 的 函数 都 不 大 合适 时 ， 就 可 
以 考虑 它 了 ， 比 如 : 
val numbers = mutableListOf("one", "two", "three") 
val firstAndLast - with(numbers) ( 
"The first element is $(first())," + 


" the last element is $(last())" 
) 


println(firstAndLast) 


一 般 在 Lambda 中 只 写 操作 上 下 文 对 象 的 代码 。 


1.7 新 式 语法 特点 总 结 


总 结 一 下 新 式 语 法 的 主要 特点 : 


(1) 尽量 少 码 字 ， 比 如 省 掉 分 号 、 省 掉 小 括号 、 多 用 Lambda. 

(2) 减少 人 为 错误 ， 比 如 力所能及 地 支持 自动 类 型 推断 。 

(3) 在 语法 层面 减少 空 指针 异常 。 这 本 来 是 调试 中 才能 发 现 的 错误 ， 但 通过 把 同一 类 型 
可 为 空 和 不 可 为 空 作 为 不 同 的 类 型 ， 在 编译 时 就 可 以 发 现 更 多 逻辑 上 的 问题 。 

(4) 要 支持 函数 式 编程 ， 这 个 特性 是 必需 的 。 

(5) 可 以 扩展 已 存 的 类 的 功能 ， 而 不 必 从 它 派生 。 


要 深入 理解 Kotlin 和 它 背 后 的 设计 与 演化 思想 ,还 要 在 入 门 的 基础 上 阅读 详细 参考 手册 。 
最 好 的 资料 是 官网 发 布 的 ， 幸 运 的 是 官网 也 提供 了 中 文 版 的 参考 手册 ， 地 址 为 
https:/www-.kotlincn.net/docs/reference/。 
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Android 当前 已 是 最 流行 的 移动 操作 系统 ， 没 有 之 一 。 

Android 基于 Linux 构建 ， 但 它 不 同 于 一 般 的 Linux 发 行 版 〈 比 如 Fedora, Ubuntu) 。 它 
对 Linux 内 核 的 改动 大 一 些 , 同时 提供 了 很 多 特有 的 系统 服务 , 当然 还 有 面向 移动 设备 的 桌面 ， 
所 以 很 多 人 把 Android 的 地 位 与 Linux 并 列 , 也 不 算 错 , 其 实 很 多 事 也 不 必 深 究 , 除了 程序 员 ， 
大 部 分 人 也 不 想 搞 清楚 两 个 操作 系统 之 间 的 关系 。 

Android 的 大 部 分 系统 功能 由 C/C++ 和 Java 开发 ， 默 认 对 外 提供 的 开发 接口 以 Java API 
为 主 〈 当 前 虽然 第 一 开发 语言 是 Kotlin， 但 是 Kotlin 还 是 要 使 用 Java 编写 的 API) 。 

2008 年 9 H , Google 正式 发 布 了 Android 1.0 系统 。 之 后 几 年 ,Google 不 断 快速 更 新 Android 
系统 。Android 3.0 是 一 个 有 较 大 改进 的 系统 ， 提 高 了 对 平板 的 支持 ， 但 没有 流行 起 来 。 从 4.0 
之 后 , 每 一 个 版 本 都 比较 流行 。 从 6.0 之 后 大 幅 改进 了 安全 性 。AndroidQ (也 就 是 Andriod 10) 
在 执行 效率 上 的 优化 越 来 越 好 ， 只 要 硬件 配置 达到 一 定 的 水 乎 ， 在 界面 流畅 度 上 ,用户 感觉 与 
ios 没有 什么 差别 。 

图 2-1 是 Android 系统 在 软件 层面 的 架构 图 ， 上 层 依赖 所 紧邻 的 下 层 。 

我 们 开发 的 App 处 于 最 上 层 ， 即 应 用 层 。 在 开发 App 时 ， 我 们 所 使 用 的 类 、 方 法 等 主要 
是 应 用 框架 层 的 包 和 库 。 应 用 框架 层 的 主要 目的 是 为 我 们 封装 了 系统 运行 库 层 的 API, 简化 了 
系统 功能 的 使 用 方式 ， 并 为 我 们 提供 了 Java 编程 接口 ， 于 是 我 们 才 可 以 用 Java 和 Kotlin 进行 
Android 应 用 开发 。 

Android 的 原生 开发 (以 Java 作为 开发 语言 ) 在 国内 其 实 经 历 了 一 个 低潮 ， 这 个 低潮 基本 
上 是 从 2016 年 到 2018 年 年 初 ， 这 段 时 间 基 于 JavaScript 的 前 端 移动 开发 框架 占据 了 主流 ， 但 
2018 年 后 Android 原生 开发 又 重新 抬头 。 当前 在 招聘 网 站 上 可 以 看 到 Android 原生 开发 人 员 的 
需求 量 逐 渐 增 加 。 

Android 当前 支持 多 种 类 型 的 设备 , 包括 手机 、 平 板 、 车 载 导航 仪 、 电 视 盒 、 电 视 、 手 环 、 
智能 手表 等 ， 由 于 其 开源 、 免 费 ， 在 市 场 上 占据 的 份额 一 直 在 增加 ， 现 已 成 为 第 一 ， 并 且 还 看 
不 到 替代 品 的 出 现 。 
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第 3 章 
< Android 开 发 环境 搭建 > 


经 过 了 充分 的 热身 ， 现 在 正式 开始 Android 开发 之 旅 。 
首先 肯定 是 安装 开发 环境 , 当前 的 Android 开发 只 有 一 个 选择 : Android Studio, Google 官 
方 出 品 。 其 实 除了 Android Studio 之 外 还 需要 Android SDK， 不 过 现在 Android Studio 已 经 很 
好 地 集成 了 Android SDK， 在 安装 Android Studio 过 程 中 会 自动 安装 Android SDK。 所 以 ， 
Android 开发 环境 的 搭建 需要 经 过 以 下 几 步 : 
* TX Android Studio. 
* 安装 Android Studio. 
* 配置 Android SDK. 
本 文 的 操作 都 是 在 Windows 下 进行 ， 其 余 操作 系统 上 也 差不多 ， 只 要 你 熟悉 那个 系统 ， 
参照 这 个 教程 也 可 以 配置 成 功 。 


下 载 Android studio 


Android 现在 在 国内 已 经 有 了 官网 镜像 ， 其 地 址 是 “https://developer.android.google.cn/ 
studio/”， 进 入 后 可 看 到 如 图 3-1 的 页 面 内 容 。 
androidstudio 


iding apps on every type of Android device. 


the fastest t 


DOWNLOAD ANDROID STUDIO 


5 for Windows 52-bit (710 MB 


" dl 


DOWNLOAD OPTIONS RELEASE NOTES 


Android Studio p 


图 3-1 
如 果 是 64 位 的 Windows 操 作 系统 , 可 以 直接 单 击 上 面 的 大 绿 按钮 下 载 安装 包 , 如 果 不 是 ， 
就 需要 单 击 “DOWNLOAD OPTIONS”， 进 入 另 一 个 页 面 选择 合适 的 安装 包 。 
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下 载 完成 后 ， 下 一 步 就 是 安装 Android Studio 了 。 欲 知 后 事 如 何 ， 请 看 下 节 分 解 。 


3.2 安装 Android Studio 


找到 下 载 的 文件 ， 双 击 运行 之 。 启 动 时 间 可 能 比较 长 ， 要 耐心 等 待 ， 启 动 后 出 现 图 3-2 所 
示 的 界面 。 
什么 都 不 用 改动 ， 直 接 单 击 “Next (下 一 步 ) ”按钮 ， 进 入 如 图 3-3 所 示 的 页 面 。 


Android Stuc ais Android 


Choose Components 
Choose which features of Androdd Studo you want to metal. 


Check the components you went to instal and uncheck the components you dor't want to 
instal. Ck Next to continue. 


S n o) Poon C: Progam Fies Vrdrod pndod Studo 


anrod vrusi Deve | 


图 3-2 图 3-3 


在 这 里 选择 安装 位 置 。 注 意 ， 安 装 到 的 路 径 中 不 要 有 中 文 或 全 角 字符 。 如 果 C 盘 剩 余 空 
间 小 于 20GB, 就 应 该 选择 安装 到 其 他 盘 了 。 如 果 要 选 其 他 位 置 安装 , 单 击 “Browser (浏览 ) 
Tal. 其 实 默认 位 置 就 不 错 , 直接 单 击 “Next” 按 钮 , 进入 建立 快捷 方式 的 页 面 ( 见 图 3-4) 。 

这 里 不 需要 改动 ， 单 击 “Next” 按 钮 ， 进 入 安装 页 面 〈 见 图 3-53) 。 等 待 安装 完成 ， 完 成 
后 单 击 “Next” 按 钮 。 


mm Android Studio Setu; 


Please wart whie Android Studo i beng nstalled 


Select the Start Menu folder in which you would lie to create the program's shortcuts. You 
Can aiso enter a name to create a new folder 


Extract: goovy-al-2.4.12 jar 


Show details 


34 3-5 
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安装 完成 ， 如 图 3-6 所 示 ， 单 击 “Finish 〈 完 成 ) ”按钮 。 

因为 “Start Android Studio 〈 启 动 Android Studio) ”被 选中 了 ， 所 以 单 击 “Finish” 按 钮 
后 ，Android Studio 会 开始 运行 。 如 果 没 有 运行 ， 也 可 以 去 开始 菜单 找到 Android Studio 的 快 
捷 菜 单 来 启动 ( 见 图 3-7) 。 


Completing Android Studio Setup 
Ld 


 Androd Studo has been installed on your computer 


Cle Fresh to dose Senp. 
F Start Androd Studo 


| 7-zp 


A 


() Alarms & Clock 


| Android studio 


Android 
tUdIC 


4X4 Android Studio 


图 3-6 图 3-7 
Android Studio 启动 界面 如 图 3-8 所 示 。 启 动 后 可 能 会 出 现 如 图 3-9 所 示 的 界面 。 


e 


StU 8 | = (x, Unable to access Android SDK add-on list 


图 3-8 图 3-9 


"Unable to access Android SDK add-on list” 的 意思 是 无 法 访问 Android SDK 附件 列表 ， 
说 明 需 要 安装 配置 Android SDK。 


配置 Android SDK 


SDK 是 软件 开发 工具 包 的 意思 。 要 基于 某 个 语言 开发 软件 ， 就 需要 使 用 一 些 类 、 调 用 一 
些 方法 。 这 些 类 和 方法 封装 了 一 些 基础 功能 和 操作 系统 的 功能 。 以 这 种 语言 的 方式 提供 ， 这 些 
类 、 方 法 等 就 组 成 了 SDK。 


31 


Android 10 Kotlin 编程 通俗 演义 


JDK 是 Java SDK 的 意思 ， 就 是 用 Java 开发 程序 时 所 使 用 的 SDK, HFR Android 程序 ， 
当然 得 用 Android SDK。 而 Android Studio 安装 包 中 并 不 带 有 Android SDK， 需 要 单独 安装 ， 
基本 步骤 如 下 : 


人 E301 在 图 3-9 中 ， 单 击 “Cancel” 按 钮 ， 进 入 如 图 3-10 页 面 。 


/以 Missing SDK 


No Android SDK found. 


Before continuing, you must download the necessary components or select an existing SDK. 


re a 


3-10 


(E2102 这 个 页 面 告 诉 我 们 Missing SDK (缺少 SDK) ,必须 下 载 必要 的 组 件 。 单 击 “Next” 按 钮 ， 
进入 图 3-11 所 示 的 页 面 。 


A SDK Components Setup 


Check the components you went to update/install. Click Next to continue. 


The collection of Android platform APIs, tools and 
vtilities that enables you to debug, profile, and 
compile your apps. 


The setup wizard will update your current Android 
SDK installation (f necessary) or install a new 
version. 


Android SDK Location: Total download size: 923 MB. 
ITUITRuTUC UTENTI Sd LL] Disk space available on drive: 163 GB 


Previous [ Nemt | Cancel 
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€XX39 这 个 页 面 让 我 们 选择 SDK 中 要 安装 的 组 件 ， 其 实 什么 也 选 不 了 ， 因 为 复 选 框 都 是 灰色 
的 ， 能 改动 的 就 是 SDK 的 安装 位 置 (Android SDK Location) 。SDK 文 件 占据 的 硬盘 空间 
比较 多 ， 所 以 如 果 C 盘 空间 小 于 30GB， 就 应 该 安装 到 其 他 盘 中 。 注 意 ， 选 择 位 置 时 ， 路 
径 中 不 要 包含 中 文 和 全 角 字 符 。 比 如 把 位 置 改 到 “F:vandroid-sdk”， 单 击 “Next” 按钮 ， 
进入 确认 页 面 ( 见 图 3-12) 。 
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^X Verify Settings 


"you want to review or change any of your installation settings, click Previous. 


Current Settings: 
Moor romer: 
Fandroid-sdk 
Total Download Size: 
11368 


SDK Components to Download: 
Android 


H 3-12 
Eo 这 个 页 面 是 让 我 们 确认 一 下 前 面 的 选择 ， 没 有 什么 问题 就 单 击 “Finish” 按 钮 ， 进 入 组 
件 下 载 页 面 ( 见 图 3-13) . 


^X Downloading Components 


Downloading. 
hrtps/dLgoogle.comvandroid/repository/android marepository r4T zip 


Install Android S t Repository (revision: 


httpa://dl.google 
ository/android mzrepository r47.2ip 


图 3-13 
€XX0 下 载 时 间 比 较 长 ， 保 持 网 络 畅 通 并 耐心 等 待 ( 见 图 3-14) . 
[@ anoi sao seo wa -= :| 


IX Downloading Components 


itory\package. xml 
epositoryMpackage xml 
age. xml 
ige xml 
i-26 package. xml 
8\Package aml 


Parsing F:\android-sdk\ 
Android SDK is up to date. 


3-14 


“Finish” 按 钮 ， 完 成 收工 。 准 备 工作 完成 ， 可 以 开始 编写 App 啦 ! 
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3.4 MRAN 


创建 App 工程 时 遵守 以 下 四 项 原则 , 可 以 让 你 少 进 很 多 坑 。 当然 还 有 更 多 要 遵守 的 事项 ， 
但 是 多 了 记 不 住 ， 先 记 这 四 条 : 


工程 名 不 能 有 中 文 或 标点 符号 ， 比 如 “我 的 工程 ”。 

工程 名 中 不 能 有 空格 ， 比 如 “hello world”。 

工程 不 要 放 在 有 中 文 的 路 径 下 ， 比 如 : helloworld 这 个 工程 的 路 径 为 “c:\wor\ 安 草 
\helloworld” 就 不 好 。 

变量 、 函 数 、 类 等 不 要 取 中 文 名 或 带 有 标点 符号 。 比 如 : "Sting 名 字 =" 马 云雨 "”。 等 
号 前 为 变量 名 ， 不 能 用 中 文 ， 改 为 “name” 比 较 好 。 


现在 可 以 创建 第 一 个 基于 Kotlin 的 Android App 了 ， 步 又 如 下 : 
创建 项 目 ， 如 图 4-1 所 示 ， 选 择 “Start a new Android Studio project (创建 新 的 Android 
Studio 项 目 ) ”。 


Android Studio 


Version 3.5 


十 Start a new Android Studio project 
s Open an existing Android Studio project 

| Check out project from Version Control 
[$ Profile or debug APK 

1€ Import project (Gradle, Eclipse ADT, etc.) 


| tX Import an Android code sample 


图 4-1 
CET? ”选择 工程 类 型 。 需 选择 App 所 支持 的 设备 和 页 面 类 型 ， 如 图 4-2 所 示 。 
| Prone Tablet Wear OS TV Android Auto Android Things. 


LEUR, 


Add No AMtivit 
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上 面 的 一 行 Tab 页 是 当前 支持 的 各 种 设备 类 型 ， 
包括 : 


* Phone and Tablet: 手机 和 平板 。 

e Wear OS: 穿戴 设备 ， 比 如 手表 、 手 环 。 

e TV: 电视 。 

* Android Auto: 汽车 上 的 影音 设备 。 

* Android Things: SA AE 

选择 “Phone and Tablet (手机 与 平板 ) ”， 在 页 
面 类 型 中 选择 “Empty Activity CF Activity) ”。 单 
击 “Next” 按 钮 ,进入 工程 配置 页 面 ,如 图 4-3 所 示 。 

在 这 个 窗口 中 从 上 到 下 的 字段 依次 是 : 图 4.3 


e Name: App 的 名 字 。 这 里 填 入 “HelloWorld”， 也 可 以 填 其 他 名 字 ， 不 过 第 一 个 程序 还 是 


Save location. 


FAworkspacelandroidyirstCotlinApp. 


Language 
Kotin 


A 


Minimum APllevel API 26: Android 80 (Oreo) - 
0 Your app will run on approximately 100% of devices. 
Help me choose 
[O This project will support instant apps 
d Use android." artifacts 


老 老实 实 跟着 学 吧 ! 


e PackageName: 基 础 包 名 字 ， 一 般 是 一 个 域名 倒 过 来 写 ， 后 面 再 加 个 单词 。 

* Savelocation: 工程 保存 位 置 。 

e Language: 开发 语言 ， 支 持 Java 和 Kotlin。 我 们 选择 Kotlin。 

* Minimum API level: App 最 低 支持 的 API 版 本 ， 当 前 默认 是 26， 对 应 Android 8.0， 也 就 是 


我 们 的 App 不 支持 8.0 之 前 的 系统 。 这 个 数 越 低 ，App 可 以 安装 到 的 设备 就 越 多 。 在 下 面 
有 “Your app will run on approximately 100% of devices( 你 的 App 将 能 运行 在 大 约 1009685 
设备 上 ) ”这 样 的 提示 。 


* This project will support instant apps〈 这 个 项 目 将 支持 instant app) : Instant App 是 一 种 新 型 


App 结构 ， 可 以 按 需 安装 App 的 各 部 分 而 不 用 一 次 性 全 装 好 。 要 支持 Instant App 的 话 相 当 
复杂 ， 不 在 本 书 的 范围 内 。 


e Use androidx.* artifacts: 使 用 androidx 库 。 这 个 是 android support 库 的 改进 版 ， 我 们 要 使 用 它 。 
选择 完成 后 ， 单 击 “Finish” 按 钮 ，Android Studio 开始 帮 有 我 们 创建 工程 。 如 果 计 算 机 配置 


低 , 可 能 需要 等 待 一 段 时 间 。 注 意 窗口 右 下 角 的 进度 条 , 如 果 它 存在 , 就 说 明 工程 未 创建 完成 ， 
需要 继续 等 待 〈 见 图 4-4) o 


^w Q Event Log 
3. 2 processes running... Context: Indexing C] 


图 4-4 


工程 创建 成 功 后 , 进入 工程 编辑 界面 , 如 图 4-5 所 示 。 很 熟悉 的 界面 ! 与 IDEA 几乎 一 样 。 
现在 Android Studio 打开 了 一 个 工程 。 左 下角 标 号 1 处 是 一 个 开关 ， 如 果 看 不 到 左右 紧 排 
的 边栏 ， 一 定 要 点 它 一 下 。 主 要 工作 区 分 成 左右 两 部 分 ， 左 区 〈 标 号 2 处 ) 是 工程 结构 ， 右 区 


(标号 3 处 ) 是 代码 编辑 区 。 
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Navigate Code Analyze Refactor Build Run Took VCS Window Help 
和 Eap > L2 NC LN E 3L a 

t " | gmactivity manxm — 4g MainActivity.kt. m 

package com. E .niu.firstáf 


> Ba manifests 


> Mjava import android.support.v7.app.# 


„| > PgeneratedJava 4 import andrgid.cs.Bundle 
f| o» mre 5 
 GGradle sl 6 š class Mai ity : AppCompatH 


(8 build.gradle (Project Fiestcotln| 7 
{© build.gradle (Module: app) 8 override fun onCreate (sav 
super.onCreate (savedIn| 


iligradle-wrapper.properties (Gra ^ = 
igr PoE € setContentView (R. layou! 


ii proguard-rules pro (?roGuard R| ^ 

ifigradle properties (Project Prop! - A } 
(8) settings.gradle [Project Scttings 1 3 
ililocal.properties (SDK Location) | - 


s Build Variants 
duod sd od DO 


国 Terminal lë Buid 三 EUeeat TODO 
Bradle build finished in 3 s 205 ms (9 minutes ago) 1:1 CRLF: UTF-8: Context eno contests 


Ed 4-5 


现在 工程 已 经 创建 成 功 , 可 能 会 有 些 错误 提示 或 警告 , 那些 一 般 都 不 是 错误 ， 只 需要 编译 
一 下 工程 ， 一 般 就 会 消失 。 编 译 工 程 的 方式 是 : 在 主 菜单 中 单 击 “Build 构建 ) ”菜单 ， 然 
后 选择 “Make Project〈 构 建 工 程 ) ”命令 即 可 。 

注意 ， 如 果 在 Build E) 窗口 〈 见 图 4-6) PRAHI “completed successfully (成 功 
完成 ) ”的 语句 ， 就 说 明 创建 失败 。 

如 果 创建 失败 ， 也 不 会 出 现 图 4-7 框 住 的 内 容 。 


h local.properties (SD' 


'otlinVFirstCotlinApp 


> 6 Configure build 


4$ Calculate task graph 
> d Run tasks 
B Terminal B E GLogcat TODO 


[E Gradle build finished in... (21 minutes ago) — 297 chars, 12 line breaks — 1:17] 


[Structure — 3 2: Favorites 


图 4-6 图 4-7 


如 果 创 建 失败 ，90% 以 上 是 因为 网 络 不 畅通 ,需要 做 的 就 是 多 重 试 几 次 , 或 者 换个 网 络 环 
境 再 重 试 ， 在 介绍 Maven 工程 时 讲 过 。 如 果 没 有 错误 ， 下 一 步 就 要 把 它 运行 起 来 。 


4.1 运行 App 


要 运行 一 个 App 很 简单 ， 单 击 菜单 栏 下 面 工具 栏 上 的 绿色 三 角 箭 头 即 可 〈 见 图 4-8) o 之 
后 ， 可 能 在 左下 角 出 现 如 图 4-9 所 示 的 错误 提示 。 

此 提示 的 意思 是 “ 找 不 到 目标 设备 ”。App 必须 运行 在 Android 设备 上 ， 如 果 指 定 了 一 
设备 ，Android Studio 就 会 把 我 们 的 App 安装 到 这 台 设 备 上 并 自动 开启 。 
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Z Calculate task graph 
» ov Run tasks 


Tode Analyze Hehacior Budd Run Took VCS Window Help 
256015 a 
eere] 


m app * | No devices «| Pp 


Error running 'app': 
No target device found. 


三 很 一 前 activity_ mainxml 


图 4-8 图 4-9 


运行 一 个 App 不 是 那么 简单 的 ， 不 过 也 不 是 什么 大 问题 ， 我 们 只 要 有 一 台 Android 设备 
就 行 了 。 

设备 分 为 真实 设备 和 虚拟 设备 ,这 两 种 都 可 以 运行 App。 真实 设备 就 是 Android 手机 或 平 
板 ， 虚 拟 设备 是 在 计算 机 中 用 软件 模拟 出 来 的 Android 虚拟 机 。 如 果 有 Android 手机 或 平板 ， 
可 以 把 它 连 接 到 计算 机 上 ， 让 Android Studio 找到 它 。 下 面 讲 一 下 如 何 把 真实 的 设备 连接 到 
Android Studio 中 。 


4.1.1 在 真实 设备 上 调试 
要 想 让 Android Studio 找到 真实 的 设备 ， 需 要 做 两 步 操作 〈 不 分 先后 ) : 


(1) 在 设备 上 开启 调试 (DEBUG) 模式 。 
(2) 用 USB 线 把 计算 机 与 设备 连接 起 来 。 


注意 ， 在 第 二 步 中 ， 把 设备 连接 到 的 计算 机 是 运行 Android Studio 的 计算 机 ， 而 不 是 不 相 
干 的 计算 机 。 

重点 讲 第 一 步 。 不 同 版 本 的 Android 系统 ， 其 打开 调试 的 方式 有 点 不 一 样 。 我 们 讲 一 下 比 
较 新 的 版 本 的 打开 调试 方式 , 旧版 本 的 方式 可 以 从 网 上 搜索 到 。 打 开 某 个 搜索 引擎 (微软 必 应 ) 
的 主页 ( 见 图 4-10) ， 以 三 星 手机 为 例 ， 我 们 输入 “三 星 手机 打开 调试 ”， 单 击 右边 的 搜索 
图 标 或 按 回 车 键 (也 可 以 输入 “ 安 卓 手机 打开 调试 ”之 类 的 语句 )， 搜 索 结果 中 的 任何 一 个 几 
平 都 对 我 们 有 帮助 ， 比 如 找到 一 个 在 三 星 S4 上 开启 调试 的 教程 ， 结 果 在 三 星 A8 上 也 适用 。 


cnbingcom 


React Native | Ato Cummins E A JavaScript library 


4-10 


根据 教程 说 明 ， 打 开 调试 的 过 程 是 : 打开 设置 (也 可 叫 作 “ 设 定 ”) 一 选择 “关于 手机 ” 
选项 一 “Android 版 本 ”选项 。 第 一 次 选择 时 会 提示 你 “点 N 次 开启 调试 ”之 类 的 话 , 跟着 做 
就 行 。 如 果 已 经 启用 调试 模式 ， 就 会 提示 已 经 开启 ， 此 时 就 不 必 再 次 开启 了 。 
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当 开 启 开 发 模式 之 后 ,再 回 到 手机 的 设置 主页 面 ,找到 “其 他 设置 ”项 ,进入 “其 他 设置 ” 
页 面 ， 就 可 以 看 到 多 了 一 条 “开发 者 选项 ”， 如 图 4-11 所 示 。 

进入 开发 者 选项 页 面 后 , 选择 最 上 面 的 “开发 者 选项 ”并 切换 到 开 状 态 , 就 打开 了 开发 者 
模式 ， 如 图 4-12 所 示 。 

开启 开发 者 模式 后 ， 下 面 出 现 好 多 设置 项 ， 只 需 在 其 中 找到 “USB 调试 ”后 开启 即 可 ， 
如 图 4-13 所 示 。 


定时 开关 机 


设备 与 隐私 


要 开启 USB 调试 吗 ? 
SIM 卡 应 用 程序 
此 功能 仅 适用 于 开发 工作 。 可 在 您 的 
当前 BEP 计算 机 与 设备 之 间 复制 数据 ， 在 您 的 
无 障碍 设备 上 去 装 应 用 而 不 发 送 通 知 以 及 读 
取 日 志 数据 。 
开发 者 选项 


OTG 连接 充电 时 屏幕 不 休眠 ims 


图 4-11 4-12 图 4-13 


单 击 开 关 控件 开启 它 ， 当 单 击 之 后 会 出 现 一 个 对 话 框 ， 要 求 确认 一 下 , Ai ME” 
即 可 。 


其 实 每 次 Android 版 本 升级 时 ， 它 的 系统 设置 项 都 会 发 生 一 定 的 改变 ， 但 不 论 怎么 变 ， 以 多 次 
点 击 “ 版 本 号 ”来 开启 开发 者 模式 的 方式 却 没 变 , 只 需要 仔细 找 找 , 多 点 击 几 下 试 试 就 能 开启 。 


开启 调试 模式 后 , 把 手机 连 到 计算 机 上 之 后 再 单 击 “运行 ”按钮 , 是 否 看 到 了 类 似 图 4-14 
所 示 的 界面 ? 真实 的 设备 被 找到 了 , 选中 它 , 单 击 “OK” 按 钮 , 就 可 以 在 这 部 设备 上 运行 App 
了 《可 能 编译 和 安装 App 的 过 程 要 花 一 点 时 间 ， 请 耐心 等 待 ) 。 


Connected Devices. 


| Create New Virtual Device | Don't soe your device? 
口 Use same selection for future launches ES Cancel. 


4-14 


一 般 原装 的 USB 数据 线 都 可 以 让 计算 机 识别 出 设备 ， 但 是 如 果 用 的 是 后 期 买 的 便宜 线 ， 可 能 
充电 没有 问题 ， 用 来 调试 就 不 行 了 。 
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4.1.2 配置 虚拟 机 


上 一 节 在 真 机 上 开启 了 调试 , 如 果 手中 没有 Android 真 机 怎么 办 ? 如 果真 机 的 系统 版 本 太 
低 怎么 办 ? (还 记得 建立 项 目 时 , 需要 我 们 选择 最 低能 安装 到 的 系统 版 本 吗 ? ) 或 者 想 在 不 同 
Android 版 本 的 系统 中 测试 我 们 的 App 怎么 办 ? 不 用 担心 ， RITA Android 虚拟 机 ! 我 们 现在 
就 通过 Android Studio 提供 的 工具 来 创建 虚拟 机 。 

单 击 主 菜 单 中 的 “Tools (工具 ) ”， 
如 图 4-15 所 示 。 

在 出 现 的 菜单 中 单 击 “AVD Manager 


(虚拟 机 管理 器 )” 命 令 ,会 出 现 如 图 4-16 
murs iG eoLJmm 


Virtual devices allow you to test your application without 
having to own the physical devices. 


Virtual Devices 


十 Create Virtual Device. 


To prioritize which devices to test your application on visit 
the Android Dashboards, where you can get up-to-date. 
information on which devices are active in the Android and 
Google Play ecosystem. 


E] 4-15 图 4-16 
其 实 也 可 以 在 工 


= app ~ || No devices ~ | > 


P Run on r7 — 


图 4-17 


M Pixel2 
Resolution — Density 
1440x29.. 560dpi 
1080x21... 


Wear os b .99* 144028... 


Tablet 


Nexus One 


Nexus 6P 


New Hardware Profile. Import Hardware Profiles 


4-18 
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在 这 个 窗口 中 , 选择 一 种 设备 去 创建 虚拟 机 。 最 左边 区 域 是 类 别 ; 中 间 区 域 是 具体 设备 属 
性 ， 其 中 Name 表示 设备 的 名 字 、Size 表示 设备 的 屏幕 尺寸 、Resolution 表示 设备 的 分 辩 率 、 
Density 表示 设备 像素 的 密度 ， 最 右边 区 域 是 预览 信息 。 
选择 一 种 设备 ， 然 后 单 击 “Next” 按 钮 ， 就 会 出 现 如 图 4-19 所 示 的 窗口 。 
Recommended x86 Images Other Images 
Release Name Target 
Android 10.0 (Goog 
Pie Download 86 Android 9.0 (Googld 
Oreo Download 27 x86 Android 8.1 (Google 
Oreo Download 2t x8 Android 8.0 (Googlé 
Nougat Download 2% x8 Android 7.1.1 (Good 
Nougat Download Android 7.0 (Googk 


D) A system image must be selected to continue. 


图 4-19 


在 这 个 窗口 中 ,选择 一 个 System Image (系统 镜像 )。 系 统 镜像 就 是 一 种 模拟 操作 系统 安 
装 光盘 的 文件 ， 就 像 Ghost Windows 时 用 到 的 “.iso” 文 件 。 

左边 区 域 的 上 面 有 三 个 Tab 页 ， 让 我 们 选择 不 同 的 镜像 。 第 一 个 Recommended 是 推荐 的 
镜像 ， 第 二 个 x86 Images 是 x86 镜像 ， 第 三 个 是 其 他 类 型 的 镜像 。 注 意 ， 如 果 不 联网 ， 表 格 
中 是 不 会 出 现 镜 像 信 息 的 。 

表格 中 一 行 是 一 个 镜像 文件 。 第 一 列 是 镜像 所 对 应 的 Android 系统 的 名 字 (Android 每 个 
大 版 本 都 用 一 种 甜品 的 名 字 做 代号 ) 。 第 二 列 是 所 支持 的 SDK 版 本 。 第 三 列 是 所 兼容 的 CPU 
架构 , 第 四 列 是 操作 系统 的 版 本 号 以 及 所 包含 的 附加 功能 。 黑色 的 行 表 示 已 下 载 到 本 地 的 镜像 
文件 ， 而 灰色 的 行 是 未 下 载 到 本 地 的 镜像 文件 。 在 灰色 行 上 的 “名 字 ” 列 中 ， 名 字 的 旁边 是 

“Download (下 载 ) ”， 单 击 即 可 下 载 这 个 镜像 文件 。 不 需要 全 部 下 载 ， 只 需 下 载 所 需 的 镜 
像 文件 即 可 。 

可 以 看 到 推荐 的 都 是 兼容 x86 架构 的 镜像 , 单 击 Tab 页 的 “Other Images (其 他 镜像 ) ”， 
就 可 以 看 到 非 x86 的 镜像 ， 比 如 “armeabi”“arm64” 等 ， 这 些 都 是 以 “arm ”开头 ， 表 示 兼 
容 ARM 架构 的 CPU。 其实 我 们 的 真实 设备 一 般 都 是 ARM 架构 的 CPU, 但 是 虚拟 机 却 推 荐 我 
们 使 用 x86 架构 的 镜像 ， 这 是 为 什么 呢 ? 因为 我 们 用 于 开发 的 计算 机 都 是 x86 架构 的 , 运行 在 
上 面 的 虚拟 机 如 果 也 是 x86 架构 ， 那 么 其 运行 就 能 优化 。 完 全 可 以 创建 ARM 架构 的 虚拟 机 ， 
但 是 启动 速度 比 乌 龟 还 慢 。 也 许 在 看 此 书 时 ，ARM 架构 的 虚拟 机 被 优化 得 更 快 了 。 

现在 选择 一 个 已 下 载 到 本 地 的 镜像 ， 然 后 单 击 “Next” 按 钮 ， 就 会 出 现 如 图 4-20 所 示 的 
页 面 。 

这 里 可 以 对 虚拟 机 进行 进一步 的 设置 。 一 般 不 需要 什么 改动 , 默认 就 很 好 ， 最 多 也 就 改 改 
名 字 CAVD name) 。 注意, 右边 区 域 中 如 果 有 图 4-21 所 示 的 提示 , 就 需要 安装 HAXM 工具 。 
要 安装 HAXM 很 简单 ， 单 击 超 链接 就 自动 下 载 安装 。 这 个 工具 是 帮助 我 们 提升 x86 虚拟 机 运 
行 速度 的 。 
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Verify Configuration 


e [Fan 可 


50108Dxig20xothdpi 


AVD Name 
Android 100 x85 


The name of this AVD. 


Recommendation 
HAXM is not installed. 
install Haxm 


Device Frame Éd Enable Device Frame. m 


Show Advanced Settings 


图 4-20 图 4-21 
单 击 “Finish〈 完 成 ) ”按钮 ， 虚 拟 机 开始 被 创建 。 可 能 需要 一 段 时 间 ， 请 耐心 等 待 。 完 
成 后 ， 就 会 出 现 如 图 4-22 所 示 的 窗口 。 


our Virtual Devices 
dio 


Type. Name | Resolution | API Target — CPU/ABI Size on Disk Actions. ] 
回 News5.. 1080x1. 23 Android.. x86 26B bv 


Ce L2 


图 4-22 


这 里 列 出 了 我 们 创建 的 所 有 虚拟 机 。 最 右边 的 三 个 图 标 是 用 于 管理 虚拟 机 的 ， 比 如 启动 、 
修改 、 删 除 等 。 绿 三 角 箭头 表示 启动 。 可 以 现在 就 点 一 下 试 试 ， 是 不 是 看 到 有 虚拟 机 启动 了 ? 
也 可 以 不 在 这 里 启动 虚拟 机 ， 在 运行 App 时 再 启动 ， 效 果 一 样 。 


A2 虚拟 机 加 速 


Android Studio 之 所 以 推荐 创建 x86 架构 的 虚拟 机 , 主要 是 因为 它 快 ,但 是 这 是 有 条 件 的 : 


(1) 计算 机 必须 是 Intel 的 CPU. 
(2) 计算 机 必须 在 BIOS 中 开启 了 CPU 虚拟 支持 。 
(3) 必须 安装 了 虚拟 加 速 工具 : HAXM。 


虽然 AMD 也 是 x86 架构 ， 但 是 Android 虚拟 机 却 不 支持 它 的 虚拟 化 技术 ， 只 支持 Intel 
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的 虚拟 化 技术 .拥有 AMD CPU 计算 机 的 话 ,只 能 创建 和 运行 ARM 架构 的 虚拟 机 。 似 乎 Google 
正在 对 AMD CPU 加 行 虚拟 机 提速 优化 ， 可 能 在 读 此 书 时 AMD 的 虚拟 化 已 被 支持 。 
如 果 是 Intel 的 CPU， 还 需要 开启 虚拟 化 支持 和 安装 加 速 工 具 。 


4.2.1 f£ BIOS 中 开启 虚拟 化 支持 


需要 做 两 件 事 : 一 是 进入 BIOS; 二 是 找到 虚拟 化 设置 项 并 开启 它 。 

台式 机 进入 BIOS 的 方式 比较 固定 ， 开 机 后 马上 按 住 “Del” 键 ， 过 几 秒 就 能 进入 。 如 果 
进 不 了 ,就 上 网 搜索 对 应 计算 机 型 号 如 何 进入 。 如 果 是 笔记 本 电脑 , 不同 的 品牌 差别 比较 大 了 ， 
一 般 都 需要 在 网 上 搜索 一 下 .比如 搜索 “联想 笔记 本 怎么 进 BIOS”, 然 后 可 以 找到 相关 文章 ， 
比如 http://jingyan.baidu.com/article/ 546ae18577d3f11149f28c23.html 写 得 就 很 详细 。 

虚拟 化 支持 在 不 同 品牌 的 计算 机 中 叫 法 有 点 不 一 样 ， 一 般 都 带 有 “Virtualization” 这 样 的 
字眼 ， 如 图 4-23 所 示 。 


Jirtualization 


4.2.2 安装 HAXM 


可 能 在 前 面 的 讲解 中 就 安装 了 这 个 工具 ， 
但 是 也 应 该 看 一 下 本 节 的 内 容 。 这 里 将 讲解 安 
装 Android 开发 工具 的 通用 方法 。 

首先 在 Android Studio 中 启动 Android 
SDK 管理 器 : 在 主 菜单 中 单 击 “Tools” 一 
“SDK Manager”， 如 图 4-24 所 示 。 Fi 4-24 

选择 后 ， 打 开 Android SDK 管理 窗口 〈 见 图 4-25) . 

选择 “SDK Tools” 选 项 卡 ， 在 下 面 的 列表 区 拖 动 滚动 条 ， 直 到 看 到 “Intel x86 Emulator 
Accelerator (HAXM Installer) ”。 如 果 前 面 的 复 选 框 已 被 选中 ， 则 表示 已 安装 ， 不 需要 再 安 
3€; 如 果 没 有 选中 ， 就 选中 它 ， 然 后 单 击 下 面 的 “Apply (应 用 ) ”或 “OK ”按钮 ，SDK 管 
理 器 就 会 自动 下 载 并 安装 它 。 


iet  Q* 加 AppThemer 


Troubleshoot device connections. 
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SDK Platforms SDK Tools SDK Update Sites 


Below are the available SB developer tools. Once installed, Android Studio will automatically check 


for updates. Check "show pkage details" to display available versions of an SDK Tool. 


lame Version Status 
|] GPU Debugging to: Not Installed 
口 Upe Not Installed 
[I NDK (Side by side) Not Installed 


C CMake Not Installed 
[ Android Auto A?I Simulators Not installed 
[L] Android Auto Desktop Head Unit emulator t Not installed 
Android Emulator 

Android SDK Platform-Tools 

Android SDK Tools 

Documentation for Android SDK 

C] Google Play APK Expansion library 

L] Google Play Instant Development SDK Not installed 
[C Google Play Licensing Library Not installed 
LI Google Play services Not installed 
[C] Google USB Driver Not installed 
[] Google Web Driver Not installed 


v Intel x86 Emulator Accelerator (HAXM installe: 


Hide Obsolete Packages 
EN -— 


图 4-25 


App 的 样子 


不 论 在 启动 App 时 选择 了 虚拟 机 还 是 真实 设备 ， 都 应 该 能 看 到 


App 的 样子 了 ， 基 本 如 图 4-26 所 示 。 


e 最 上 面 深蓝 色 长 条 是 系统 状态 栏 ， 显 示 了 很 多 系统 状态 ， 比 如 
是 否 有 内 存 卡 、 是 否 连接 到 了 WIFI、 电 池 电 量 等 。 

e 下 面 的 高 度 大 一 些 的 蓝 色 条 为 导航 栏 ， 一 般 显 示 一 个 页 面 的 标 
题 、 菜 单 等 。 

e 再 下 面 白 色 区 域 是 内 容 区 ， 现 在 只 显示 了 一 段 文字 : “Hello 
World”。 

至 此 ， 第 一 个 App 运行 起 来 了 。 

回忆 一 下 我 们 做 了 什么 ， 包 括 安装 Android Studio 和 Android 


SDK、 创 建 工程 、 配 置 虚拟 机 、 运 行 App。 
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1 工程 里 面 有 什么 


环境 准备 好 了 ， 下 面 要 开始 编写 代码 。 先 了 解 一 下 Android TS 


图 4-26 


有 有 什么 〈 见 图 4-27) 。 


注意 ， 左 边 箭头 所 指 的 Tab 页 要 选中 ， 右 边 箭头 所 指 的 地 方 有 很 多 选项 ， 它 们 表示 从 不 
同 的 角度 来 观察 工程 。 默 认 选 择 “Android”， 因 为 是 Android 工程 。 


第 4 章 第 一 个 Kotlin App 


Duges XMARA td .ma 
Š Android -| [ERES 


工程 用 一 个 树 形 结构 来 展示 ， 有 两 个 根 : "app" fU 
“Gradle Script”。 这 是 两 个 组 ， 不 一 定 对 应 实际 的 文件 


来。 其 实 应 该 抛 开 文件 来 的 概念 来 观察 这 个 工程 结构 。 | eem xm 
app 组 下 有 三 个 组 : Ee PES 


> Einiueducomhelloworid 
> Einiueducomhelloworid (androidTest) 
> finiueducomhelloworld (test) 

Y Fares 


e manifests : 里 面 包含 manifest X 件 
(AndroidManifestxml) ， 这 个 文件 可 以 认为 是 整 


© drawable 
个 App 的 全 局 描述 和 配置 文件 。 » Bo 
* Eimipmop 
e java: 里 面 是 Java 类 。 类 分 布 在 三 个 Java 包 中 : X » values 


* © Gradle Scripts 
€ build gradle (Project: HelloWorld) 
© bulid.gradie (Module: app) 

[à gradle-wrapper properties (Gradle 
目 proguard-rulespro (Pr 
[à gradle.properties (Proje 


上 面 的 包 里 放 的 是 最 终 包含 在 App 中 的 代码 ， 有 
“androidTest” 标 记 的 包 里 要 放 与 Android 有 关 的 
测试 代码 ， 有 “test” 标 记 的 组 里 要 放 与 android 无 


关 的 测试 代码 。 Re 
eo res: 里 面 放 的 是 非 代码 文件 。 这 些 文件 叫 作 资源 ， 

不 能 被 编译 器 编译 ， 包 括 图 片 、 界 面 定义 等 。 不 同 图 4-27 

类 型 的 资源 放 在 不 同 的 组 下 。 


Android Studio 使 用 Gradle 这 个 工具 来 管理 工程 , 所 以 在 “Gradle Scripts (Gradle 脚本 ) ” 
组 下 有 很 多 与 Grade 有 关 的 文件 。Gradle 文件 一 般 不 需要 直接 修改 ， 在 项 目 设置 中 改变 选项 
就 会 修改 它们 。 


在 打开 一 个 工程 的 过 程 中 , 一 开始 可 能 显示 的 工程 结构 不 是 这 样 的 , 此 时 应 该 注意 观察 Android 
Studio 最 下 面 的 状态 栏 上 是 否 有 进度 条 ( 见 图 4-28 ) 。 如 果 有 ， 则 表示 在 执行 Gradle 脚本 ， 工 
程 的 初始 化 还 未 完成 ， 还 不 是 最 终 的 样子 ， 此 时 最 好 不 要 动工 程 中 的 文件 。 

B rogue sues po. (P 

[à gradle.properties (Prc 


© settings.gradle (Proje: 
[à local.properties (SDK L 


| "TODO #6 Android Monitor i Terminal I © Messages 
E] Executin.. (moments ago) ^ Gradle Build Running #227777750 


4-28 


后 面 将 开始 设置 这 个 工程 ， 让 App 变 得 有 个 性 并 强大 起 来 。 界 面 是 最 容易 出 效果 的 ， 所 
以 下 一 章 就 从 界面 入 手 。 
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第 5 章 
< Ul 资源 与 Llqyovut > 


大 家 对 Android 开发 有 了 初步 的 具体 认识 。 下 面 我 们 创建 一 个 新 工程 ,然后 逐步 丰富 这 个 
工程 的 界面 ， 渐 进 式 增加 它 的 功能 ， 让 大 家 轻松 理解 各 种 组 件 和 工具 的 作用 。 

创建 工程 过 程 不 再 歼 述 ， 参 考 第 4 章 。 建 议 新 工程 名 字 为 “FirstKotionApp”， 包 名 为 

“com.example.niu.firstcotlinapp”， 跟 这 里 创建 的 一 样 。 

我 们 先 试 着 做 界面 CHI User Interface, UI) 。 

我 们 看 到 的 窗口 、 控 件 都 属于 UI. 相对 于 命令 行 的 用 户 界 面 , 这 种 界面 是 图 形 用 户 界面 ， 
简写 为 GUI 〈 更 简化 一 下 ， 也 叫 作 UI) 。 

如 今 的 GUI 框架 都 讲究 代码 与 UI 设计 分 离 ，Android 也 是 这 样 ， 它 把 UI 的 样子 定义 在 
XML 文件 中 ，App 运行 时 根据 XML 的 内 容 在 内 存 中 创建 各 种 界面 元 素 对象 。 在 Android 中 ， 
这 种 定义 UI 的 XML 文件 被 称 作 Layout 资源 (有 时 被 简称 为 Layout) 。 

现在 我 们 的 App 界面 中 央 显示 了 一 句 话 “Hello World”， 它 是 由 一 个 TextView 控件 显示 
的 ， 可 以 改进 一 下 。 

如 果 UI 设计 与 代码 不 分 开 ， 也 就 是 直接 用 代码 设计 UI, 我 们 可 以 先 预想 一 下 怎么 做 。 比 
如 想 在 页 面 中 显示 一 幅 图 像 ， 写 代码 的 话 ， 肯 定 有 一 些 类 和 方法 CAPD 可 供 我 们 调用 以 操作 
界面 。 我 们 应 该 能 通过 API 获取 到 代表 内 容 显示 区 的 一 个 UI 对 象 〈 容 器 ) ， 然 后 创建 出 一 个 
能 显示 图 片 的 UI 对 象 , 把 图 像 UI 对 象 添加 到 容器 UI 对 象 中 ,图 像 成 了 容器 的 “儿子 ”,“ 儿 

”会 显示 在 “爸爸 ”上 面 ， 所 以 就 能 在 内 容 区 看 到 这 个 图 像 了 。 这 个 猜想 很 对 ! 其 实 不 同 操 
作 系 统 中 的 UI 构建 都 是 这 个 原理 。 然 而 ， 在 Android 开发 中 ， 还 有 更 简单 的 办 法 ， 不 用 写 一 
句 代码 就 能 完成 UI 构建 。 如 何 做 到 的 呢 ? 编辑 UI 资源 文件 ! 那么 如 何 编辑 UI 资源 呢 ? 使 用 
界面 构建 器 ! 


Layout 


Layout 的 意思 是 界面 布局 ， 用 来 设计 界面 的 布局 ， 所 以 Layout 类 型 的 资源 文件 就 是 界面 
定义 文件 。 使 用 Android Studio 提供 的 界面 构建 器 设计 Layout， 可 以 做 到 所 见 即 所 得 。 

Android 中 的 UI 定义 文件 是 一 个 XML 文件 ,因为 不 是 Java 代码 ,所 以 被 归 为 资源 ,Layout 
资源 放 在 哪里 呢 ? 见 图 5-1. 


$85 3$ UAS Layout 


~ Mapp 1 package 
> B manifests 2 


~ Mjaa | 3 import 

> Ea com.example.niu-firstcotlinapp 4 import 

> Ea com.example.niufirstcotlinapp (androidTes ^ 

> fscom.example.niufirstcotlinapp (test) | HO class 
> Pg generatedJava IB e E 
v Bres | s 

> amase e 医 

~ Ps layout m j 

activity mainxml 12 ) 
> B mipmap EE 


> fsvalues 


5-1 
可 以 看 到 res/layout 组 下 当前 只 有 一 个 文件 : activity_main.xml， 就 是 它 定 义 了 我 们 所 能 看 
到 的 界面 。 它 是 我 们 创建 这 个 App 时 被 自动 添加 的 ， 也 可 以 手动 添加 。 双 击 打开 它 ， 可 以 看 
到 如 图 5-2 所 示 的 界面 〈 第 一 次 显示 U 的 过 程 可 能 比较 长 ， 请 耐心 等 待 ) 。 


Lis activity mainxml - HB Mai 


日 5% © © 


v "U ConstraintLayout 
Ab TextView - “Hello W 


5-2 


这 里 展示 的 是 界面 设计 器 。 在 这 个 窗口 中 可 以 通过 拖 动 一 些 控件 摆 放 它们 的 位 置 来 设计 
App 的 页 面 。 标 号 所 示 区 域 的 作用 如 下 : 


e 1: 控件 类 别 。 

e 2: 选中 类 别 的 控件 列表 。 

e 3: 所 设计 的 页 面 中 的 控件 树 。 

e 4: 切换 页 面 设计 器 视图 ， 可 选择 设计 视图 或 源码 视图 。Design 是 设计 , 就 是 当前 看 到 的 ; 


Text 是 源码 ， 就 是 此 页 面 所 对 应 的 XML 内 容 。 
e 5: 页 面 预览 图 。 可 能 与 App 实际 运行 效果 有 些许 差异 。 
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e 6: 页 面 排版 预览 图 。 突 出 显示 各 控件 之 间 的 摆 放 位 置 和 它们 之 间 的 位 置 关 系 。 
e 7: 此 图 标 有 下 拉 莱 单 ， 用 于 选择 如 何 预览 界面 ， 有 三 种 模式 ， 即 同时 显示 预览 图 与 排版 
图 、 只 显示 排版 图 、 只 显示 预览 图 。 


可 以 看 到 标号 5 处 是 一 个 手机 页 面 的 预览 图 。 这 个 layout 文件 定义 了 一 个 页 面 的 界面 , 一 
个 页 面 叫 作 Activity。 但 是 ， 在 预览 时 也 有 可 能 看 到 如 图 5-3 所 示 的 界面 。 


E activity mainai x 
ewr BEE O ÜNou4- m25- OApprem longsger D- 
Owens a 


| Pelette 


DWidgets 
国 TextView 


'Samiadoad «4 


m Button. 

= ToggleButton. 

Ii Check8ox 

© RadioButton 

R- CheckedTextView 
— Spinner 

= ProgressBar (Large) 


< Rendering Problems 


OO java wil concurrent. Timeo! rr Preview timed out while rendering 
This typically happens when there is an Ymg loop or unbounded recursior 
£ custom views. 


at java utl zip ZigFle sead ZipFlo java:-2) 
m DieeweecRar at java atl ip ZipFie aceessS1400(Z9Fie ava 60) 
Component Tree at java utl zip ZipFileSZgFieIopurStream read(ZpFile java 717) 
| at java utl zip ZipFieSZoFieInfarerInputSrream fü(ZopFile ava419) 
月 at nva atLzp infiaterInput Siream read (InfiaterinputStream ava 158) 
at com irtelld cpenapi utl io FleUtiRt loadBytes(teUtIRt javz G2) 
at com intelli opcnapi atio FJeUilcadDyiesFikUtl java 1604) 
at com intelli. vti ang Memory Rescurce od MemoryResource java: 4) 
at com intells vi lang JarLoader.geRResource(JatLosder java:131) 


a| | Design| Text 
Terminal — & © Messag 


g — * Gradle Console 
图 5-3 


预览 不 成 功 。“Rendering Problems” 的 意思 是 “呈现 时 的 问题 ”, 就 是 呈现 UI 时 遇 到 了 
问题 。 要 解决 这 个 问题 ， 一 般 重新 编译 整个 工程 即 可 ， 如 图 5-4 所 示 。 


Make Module 'app 
- Clean Project 

Rebuild Project 

Edit Build Types. 

Edit Flavors. 

Edit Libraries and Dependencies- 


国 chec 
图 Radi 
到 Chec 


Select Build Variant.. 
Build APK 
Generate Signed APK.. 


Analyze APK.. 


Deploy Module to App Engine... 
Rar at andrond. view Layoutinflater is fate (Layootlafiatcr. 


5-4 
当 重 新 编译 之 后 ， 就 能 看 到 UI 的 样子 了 。 


所 有 的 控件 都 是 从 类 View 派生 的 , 所 以 控件 也 被 叫 作 View. 各 种 Layout 控件 当然 也 是 View, 


但 是 其 作用 特殊 ， 所 以 单独 称 之 为 Layout. (有 时 我 们 也 把 一 个 UI 资源 文件 称 作 layout 资源 ， 
因为 它 在 res/layout 组 下 ) 。 
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5. 


改 一 下 Layout， 显 示 一 个 图 片 。 首 先 看 一 下 Android Studio 


第 5 章 UI 资源 与 Layout 


2 改动 Layout 


alette a*r 

的 界面 设计 器 中 为 我 们 提供 了 哪些 可 用 的 控件 〈 见 图 5-5) : eum 
Common: 一 些 常 用 的 控件 。 E po " 

Tex: 文本 显示 控件 和 各 种 文本 输入 控件 ， 它 们 都 不 能 容纳 。 | woow。 perd Numer 


要 


孩子 。 layouts — A Phone 


Buttons: 各 种 按钮 。 a Pi rds 
Widgets: 包含 各 种 不 好 分 类 的 控件 , 它们 的 共同 特点 是 不 能 

容纳 孩子 。 nini 
Layouts: 专门 用 于 排版 的 控件 ， 它 们 是 容器 ， 专 用 于 容纳 控 

件 ， 按 某 种 规则 排列 它 里 面 的 控件 。 图 5-5 


Containers: 容器 ， 与 Layout 类 似 ， 专 门 用 于 容纳 控件 ， 支 持 内 容 滚动 ， 控 件 的 排列 方式 
固定 ， 不 能 更 改 。 

Google: Google 为 Android 提供 的 第 三 方 控件 ， 比 如 Google 的 广告 控件 、Google 地 图 控件 。 
Legacy: 旧 控 件 ， 有 了 新 的 替代 控件 。 

Project: 在 项 目 中 自 定义 的 控件 。 


显示 图 像 ， 应 该 去 Common 或 Widgets 组 中 去 找 合适 的 控件 ， 如 图 5-6 所 示 。 


activity mainyml 
Que $- Q- [Neuss » © 68% @ 


Ab TextView v Mow|dfsxlItir 
- Button. 


{= RecyclerVi 

<> «fragment» HelloWorld 
加 ScrollView 

ee Switch 


Component Tree 次" u 


v." ConstraintLayout Hello World! 
Ab TextView - "Hello World 


图 5-6 


选择 “ImageView (图像 视图 ) ”这 个 控件 ， 然 后 把 它 拖 到 预览 页 面 的 内 容 区 。 当 放 开 鼠 
标 时 ，Android Studio 就 会 打开 一 个 窗口 ， 选 择 要 在 这 个 图 像 控 件 中 显示 的 图 像 〈 第 一 次 运行 
可 能 要 等 很 长 时 间 ) ， 如 图 5-7 所 示 。 
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| Sample data 如 一 一 


avatars 


backgrounds/scenic 


meu pem 


[a | ic launcher 


B ic launcher background 


ic leuncher foreground 


eo ic launcher round 


|* android 


[^ aert dark trame 


ll ert light frame 


5-7 
此 窗口 分 成 左 、 中 、 右 三 个 区 , 最 左边 为 类 别 , 有 “Drawable” 
和 “Color”， 分 别 表示 可 绘制 的 《图像 ) 资源 和 颜色 资源 。 选 择 MINIME 


“Drawable”， 此 时 中 间 区 显示 的 都 是 可 用 的 图 像 资 源 。 这 些 
Drawable 资源 又 被 分 为 多 个 组 :Sample data 组 中 是 示例 图 像 和 PC 
上 的 一 些 图 像 ，Project 组 中 是 工程 中 的 资源 ，android 组 中 是 
Andriod SDK 中 带 的 资源 。 选 什么 都 行 ， 比 如 这 里 选择 Project 中 
的 第 一 个 : ic_launcher， 单 击 “OK ”按钮 后 就 可 以 看 到 预览 界面 
中 多 了 一 幅 图 像 ， 如 图 5-8 Fra. 

图 像 有 点 小 ， 把 这 个 图 像 调 大 一 点 ， 怎 么 做 呢 ? 图 像 控件 默 
认 是 以 所 显示 图 像 的 真实 大 小 来 决定 自身 大 小 的 ， 也 就 是 控件 适 
应 图 像 ， 但 也 可 以 反 过 来 ， 让 图 像 适 应 控件 ， 此 时 我 们 应 该 为 图 
像 控 件 指定 固定 的 大 小 ， 然 后 让 图 像 根据 图 像 控 件 的 size 自动 缩 
放 。 要 做 到 此 效果 ， 只 需要 修改 图 像 控件 的 “layout_ width" CA 
度 ) 和 “layout_height”( 高 度 ) 属性 。 要 修改 控件 属性 ， 需 打开 
属性 栏 ， 如 图 5-9 所 示 。 


1 


~ Sr [Neus4- :28* ®© AppTheme* »032%0 © Ou: 


m 


| Ws, JR # tE- dm. I- ur ENS 


sna 


FirstCotlnApp 
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打开 后 ， 可 以 看 到 类 似 图 5-10 中 的 内 容 。 


"DNews4"  » O30% € 加 @ Anous a e|eo- En 
dp, A% # (BRIT i- D imageView 

leyout width wrap content 

layout height wrap content 


^ ImageView 
srcCompat Gmipmap/ic launcher 
Z srcCompat 

contentDescription. 


background. 


scaleType. 


5-10 


红 框 内 就 是 属性 栏 。 当 选中 不 同 的 控件 就 可 以 看 到 不 同 的 属性 , 在 预览 窗口 或 控件 树 中 选 
中 图 像 控件 时 ， 就 会 看 到 与 本 书 一 样 的 内 容 了 。 

当前 layout width CÈ) 属性 和 layout height (高 ) 属性 的 值 都 是 “wrap_content ( 包 着 内 
容 ) ”， 所 以 控件 的 大 小 由 其 内 容 (就 是 图 像 ) 决定 。 把 这 两 个 值 改 为 固定 的 大 小 ， 比 如 宽 和 
高 都 改 为 “200dp”， 效 果 如 图 5-11 所 示 。 


D imageView 


layout width 200dp 
layout height 200dp 


srcCompat Gmipmap/ic launcher. 
4 srcCompat. 


contentDescription 


background. 


5-11 


有 人 可 能 注意 到 表示 距离 的 数字 后 带 有 “dp”。 是 的 ， 必 须 带 它 。dp 是 一 个 距离 单位 ， 
表示 的 是 实际 的 物理 距离 ， 与 像素 大 小 无 关 。 


51 


Android 10 Kotlin 编程 通俗 演义 


属性 栏 中 显示 的 属性 是 随 着 所 选择 的 控件 而 变化 的 ， 可 以 单 击 “Hello World! ”这 个 文本 控件 
试 试 ， 是 不 是 显示 的 属性 变 了 ? 所 以 在 编辑 属性 之 前 要 先 确定 当前 是 哪个 控件 ， 因 为 经 常 发 生 
点 错 的 情况 。 


5.2.1 添加 图 像 资源 


如 果 想 在 图 像 中 显示 自己 喜欢 的 图 像 ， 怎 么 办 呢 ? 这 也 不 难 , 可 以 把 计算 机 上 的 图 像 复 制 
到 工程 的 资源 中 ， 这 样 就 可 以 在 工程 中 使 用 它们 了 。 

向 工程 中 添加 资源 文件 的 做 法 是 : 在 文件 浏览 器 中 找 一 幅 图 像 文 件 (如 果 没 有 就 从 网 上 下 
载 一 个 ) ， 最 好 是 PNG 格式 的 ，JPG 的 也 行 ， 然 后 在 文件 浏览 器 中 复制 此 文件 〈 按 Ctr C 键 
或 右键 菜单 中 选择 “复制 ”) ， 再 在 工程 中 要 放 入 此 文件 的 组 上 右 击 ， 再 从 弹出 的 快捷 菜单 中 
选择 “Paste (粘贴 ) ”命令 ， 如 图 5-12 所 示 。 


iĝ Android + di activity_main xml 


< 


zapp 

> MM manifests 

> Mjava Commo Ab 

> Pg generatedigfa ex S Button. 

v Pres go 四 imageview 
> B drawable New > 
> Ea layout Link C++ Project with Gradle 
> Bimipmep 6 Cut Ctrl+X 
? Bivolues & Copy Cul-c 

v © Gradle Scripts Copy Paths Ctri+Shift+C 

© buildgradle (Pri ^ Copy References Ctrl+Alt+ Shift+C 

© build gradle (Mo 


Palette 


Scopre: MERE 


figradle wrapper 。 Find Usages AltrF7 
d proguard-rulest Analyze > 


图 5-12 


图 像 必须 放 到 “drawable” 组 中 。drawable 组 中 专门 放 可 以 绘制 的 资源 ， 所 以 不 要 放 到 其 
他 组 中 。 单 击 “ 粘 贴 (Paste) ”命令 之 后 即 会 出 现 如 图 5-13 所 示 的 对 话 框 。 


Copy file FAworkspaceVAn p\app\sre\main\res\drawable\female.png 


Mennan: [Epo 


To directory: _ xce\android\book-kotlin\FirstCotlinapp\app\sre\main\res\drawable ~ |.. 
Use Ctrl 5 for path completion. 


e [9€] | cancer 
图 5-15 
在 这 个 对 话 框 中 ， 可 以 修改 文件 名 和 文件 存放 的 位 置 。 存 放 位 置 不 要 动 。 资 源 名 可 以 随便 
取 , 但 要 有 意义 , 而 且 不 能 用 中 文 、 不 能 以 数字 开头 、 不 能 用 大 写字 母 , 如 果 不 符合 这 些 要 求 ， 
工程 编译 通 不 过 。 如 果 英 语 不 好 就 用 拼音 取 名 。 如 果 资 源 文件 名 不 符合 要 求 ， 那 么 编译 App 
时 会 看 到 错误 ， 如 图 5-14 所 示 。 
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7 Pares 1 


pm D 

v 四 dawebie ~ Tactivity main (Rela 

目 20pn EE TextView - "H 

y E layout 

+ D mipmap Design | Text 
sagos Gradie Buld. *i 
x Gradle tasks [app:generateDebugSources, :app.generateDebugAnóroidTestSources, 
x @ app:mockableAndroidjar :app;iprepareDebugunitTestDependencies, :app:complieDebugSources, 

s :app:compileDebugAndroidTestSources, app:compileDebugUnitTestSources] 
* Execution failed for task "appzmergeDebugResources 
国 。 @ > CUsers\bllicAndroidstudioprojects\HelloWorid\app\src\mainves\dranable\20.png: Error: The resource 
下 _ name must start with a letter 


G BUILD FAILED 


— 


TODO 4 & Android Monitor — (S Terminal 


图 5-14 


Evertlog (E Gradie conecle 


在 “Messages” 这 个 窗口 中 , 输出 了 编译 中 遇 到 的 错误 ， 可 以 看 到 这 个 错误 最 后 给 出 的 原 
因 是 “The resource name must start with a letter” 意 思 是 资源 的 名 字 必 须 以 字母 开头 。 


5.2.2 ”文件 或 文件 夹 改名 


如 果 这 个 资源 已 加 入 了 工程 ， 但 是 名 字 不 合格 ， 怎 么 办 呢 ? 改名 ! 改名 方式 是 : 在 文件 上 
右 击 ， 在 弹出 的 快捷 菜单 中 选择 “Refactor CEH) ”命令 ， 再 选择 “Rename ( 重 命名 ) ” 命 


令 ， 如 图 5-15 所 示 。 


Navigate Code Analyze Refactor Build Run Tools VCS Wi 


+ ^ Bap bp kd 
ot "t 


一 个 窗口 现 身 ， 如 图 5-16 所 示 。 


注意 , 改名 时 不 要 改 扩展 名 , 改 完 后 单 击 “Refactor 


( 重 构 ) ”按钮 保存 新 名 。 
5.2.3 ”显示 自己 的 图 像 


选中 图 像 控件 ， 打 开 属 性 栏 ， 其 中 srcCompat 属性 


就 是 用 于 设置 图 像 的 ， 如 图 5-17 所 示 。 


mB Lu 
三 acivig meinxml = | 
Palette 
Commo Ab 
tea Button 
四 Imageview 
3 


Buttons. 


CirieX 
Chic 
Cul«Shift«C 
Ctrl- AltrShift« C 
Culty 

ma 

Ctrl+AltF4 
Alt-F7 


图 5-15 


F6 
FS 
Alt Delete. 


Ctrl Ate N 


jurn Value. 


or with Factory Method. 


> 


Rename file female.png and its usages to: 


Search in comments and strings 


Preview | | Camel | | Help 


5-16 
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图 5-17 


注意 ,在 这 个 属性 栏 中 ,并 不 能 显示 所 有 的 属性 。 如 果 要 显示 所 有 的 属性 ， 需 单 击 图 5-18 
中 箭头 所 指 的 位 置 。 
background 


adjustViewBounds [8] 

eropToPadding @ 一 

~ Favorite. 

visibility none 

View all attritites > 
B 5-18 


单 击 “View all attributes (查看 所 有 属性 ) ”链接 后 会 发 现 一 堆 属性 〈 见 图 5-190. 。 
ET 


layout width — 200dp 
layout height — z00dp 


> Constraints 
> Layout Margin — [522,29] 
> Padding FAAA] 


> Theme 
elevation 
layout editor abso 

layout editor abso. 

srcCompat Gmipmap/ic launcher. 
accessibilityLivetec 

accessibilityrravers. 

accessibilityrravers. 

adjustViewBounds fa] 

alpha 

background 

backgroundTint 

backgroundTintMo 

barrierAllowsGoneYa] 

barrierDirection 


baseline 
bacelineAlign&ortora] 
chainUseRtl 国 
n 

图 5-19 


第 5 章 UAS Layout 


如 果 要 回 到 原来 的 视图 ， 单 击 最 下 面 的 “View fewer attributes (查看 更 少 的 属性 ) ”( 见 
图 5-20) 。 

在 图 5-21 中 可 以 看 到 ， 它 的 值 是 “@mipmap/ic launcher”。 这 个 以 “@” 开 头 的 字符 串 
表示 的 是 一 个 站 。 每 个 资源 都 有 自己 的 ID，ID 的 名 字 就 是 这 个 资源 的 文件 名 。 这 里 通过 ID 
引用 了 一 幅 图 像 资 源 。 若 要 改变 显示 的 图 像 ， 可 以 为 这 个 属性 直接 写 入 某 个 图 像 的 也。 手写 
容易 出 错 ， 可 以 借助 工具 来 设置 。 单 击 图 5-21 所 示 的 按钮 ， 出 现 资源 选择 窗口 ( 见 图 5-22) 。 


ImageView “Picka Resource | 
sreCompat @mipmap/ic auncher 


vsrcCompar 


contentDescription 


background 


B 5-22 


在 Drawable 类 别 的 Project 组 下 可 以 看 到 我 们 新 加 入 的 图 像 ， 选 
中 后 单 击 “OK ”按钮 ， 效 果 如 图 5-23 所 示 。 

Android Studio 会 自作 聪明 地 把 属性 编辑 器 中 刚刚 编辑 过 的 属性 
移 到 靠 顶 的 位 置 ， 也 就 是 说 这 些 属 性 在 属性 栏 中 乱 跑 ! 

运行 起 来 看 看 真实 的 效果 (运行 App 的 方法 参见 2.2 节 ) ， 此 时 
activity main.xml 文件 的 内 容 如 下 : 


«?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 


图 5-23 


xmlns:android-"http://schemas.android.com/apk/ res/android" 
xmlns:tools-"http://schemas.android.com/tools" 


xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"match parent" 
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tools:context-".MainActivity"^ 

«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"Hello World!" 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toTopOf-"parent" /? 

«ImageView 
android:layout width-"200dp" 
android:layout height-"200dp" app:srcCompat-" Gdrawable/female" 
tools:layout editor absoluteY-"141dp" 
tools:layout editor absoluteX-"176dp" android:id- " @+id/ 

imageView"/> 
</android. support.constraint.ConstraintLayout> 


这 些 源码 是 怎么 看 到 的 呢 ? 看 图 5-24 就 明白 了 ! 


port.constraint.ConstraintLayout 


Design) Tex | 
* TODO  £ &Llogcat Terminai — |" Build 
国 Gradle sync finished in 734 ms (from cached state) (21 minutes ago) 


2 
H 
H 
* 


图 5-24 
5.24 XML 小 解 


界面 设计 文件 的 格式 是 XML， 稍微 解释 一 下 。 
XML 是 存储 数据 的 一 种 格式 ， 只 能 以 文本 方式 存储 数据 ， 也 就 是 说 存储 不 了 图 片 〈 其 实 
也 有 办 法 存 ， 但 是 很 麻烦 ， 不 推荐 这 样 做 ， 所 以 现在 可 以 认为 它 只 能 存 文本 ) 。 它 的 数据 由 元 
素 组 成 ， 一 条 数据 是 一 个 元 素 ， 元 素 由 标记 来 表示 。 标 记 即 以 “< >” 包 起 来 的 文本 。 比 如 : 
<aaa></aaa> 就 是 一 个 元 素 ，<aaa> 是 开始 标记 ，</aaa> 是 结束 标记 。 如 果 一 个 元 素 不 包含 子 
元 素 ， 则 为 空 元 素 。 比 如 这 里 的 <aaa> 就 是 一 个 空 元 素 。 空 元 素 可 以 把 结束 标记 省 略 ， 比 如 写 
为 <aaa /> 。 以 下 示例 则 表示 <aaa> 有 儿子 <bbb> 和 <ddd>， 还 有 孙子 <ccc>: 
<bbb> 
«ccc /> 
</bbb> 


<ddd /> 
</aaa> 
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一 个 元 素 除 了 可 以 有 多 个 儿子 ， 还 可 以 有 多 个 属性 。 例 如 ， 在 <aaa eee="1" /> 中 ，eee 就 
是 <aaa> 的 一 个 属性 ， 等 号 前 面 的 内 容 是 属性 的 名 字 ， 等 号 后 面 的 内 容 是 属性 的 值 。 注 意 ， 属 
性 的 值 必须 用 单 引号 或 双 引 号 包 起 来 ， 同 时 引号 必须 是 半角 字符 ! 这 是 一 个 新 手 常 掉 的 坑 。 


5.25 Layout 源码 解释 
现在 让 我 们 逐条 解释 activity main xml 文件 中 一 些 令 人 迷惑 的 代码 : 


<?xml version-"1.0" encoding="utf-8"?> 


XML 都 这 样 开 头 ， 不 要 太 在 意 。version 表示 版 本 是 1.0，encoding 表示 编码 是 utf-8， 要 
想 没 有 乱码 ， 就 必须 保证 这 个 XML 文件 真 的 是 utf-8 编码 。 
<android.support.constraint.ConstraintLayout xmlns:android- 
"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context-"niuedu.com.andfirststep.MainActivity"» 


这 是 界面 最 外 层 的 元 素 ， 可 以 看 到 标记 名 是 一 个 类 (ConstraintLayout) 的 全 名 。 如 果 这 个 
类 是 Android SDK 核心 库 中 的 类 ， 可 以 把 包 省 略 ， 只 写 类 名 。 根 据 类 名 我 们 就 可 以 知道 界面 
的 最 外 面 是 一 个 ConstraintLayout 控件 。 

此 元 素 中 有 一 些 “xmlns” 开 头 的 属性 ， 它 为 xml 命名 空间 指定 了 别名 ， 比 如 “android” 
“app” 和 “tools” 就 是 三 个 别名 。 要 使 用 哪个 命名 空间 中 定义 的 符号 ， 就 必须 在 名 字 前 带 上 
命名 空间 的 别名 ， 比 如 android:layout_width="match_parent"， 这 个 属性 名 layout width 就 
属于 android 这 个 别名 所 对 应 的 命名 空间 中 定义 的 符号 .如果 命名 空间 没有 引入 , 则 不 能 使 用 。 
此 时 AndroidStudio 会 提示 语法 错误 。 比 如 ， 把 xmlns:android-"http://schemas.android.com/ 
apk/res/android" 这 一 条 语句 删 掉 ， 之 后 会 出 现 图 5-25 所 示 的 界面 (红色 表示 错误 ) o 


UI vers: encodingz ui 
«android. Run Mu CREME 


xalns:toolss"http: //schemas android. coa/tools" 
Xnlns :appz"http://schemas. android. com/apk/res-auto" 


— 'wrap content" 


out heightz" wrap. content" 


app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toTopOfz"parent"/» 


KamageView ss 
: layout, width-"209dp" 
"29edp”app:srcConpat= "edrawable/female” 


tools:layout_editor_absoluteY="141dp" 
tools:layout_editor_absolutex="176dp" android:id="@+id/imageview" $ 
«/android.support.constraint.ConstraintLayout» 


525 
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宽 和 高 这 两 个 属性 必须 存在 ， 即 : 


android:layout width-"match parent" 


android:layout height-"match parent" 


它们 是 控件 的 宽 和 高 ， 这 两 个 属性 必须 存在 ! "match parent” 的 意思 是 匹配 父 控件 ， 就 
是 与 父 控件 的 大 小 一 样 。ConstraintLayout 是 最 外 面 的 控件 ， 它 的 大 小 必须 与 Activity 一 样 ， 
也 就 是 充满 整个 屏幕 ， 所 以 值 必须 为 “match_parent”。 (我 们 前 面 讲 过 了 ， 宽 和 高 的 值 可 以 
有 三 种 : match parent. wrap content 和 固定 值 。) 

以 “tools” 为 前 级 的 属性 仅 在 界面 设计 器 中 起 作用 。 这 些 属性 都 是 用 于 设计 界面 时 指示 界 
面 设计 器 行为 的 ， TE App 运行 时 它们 是 不 起 作用 的 。 比 如 tools:context- 
"niuedu.com.andfirststep.MainActivity"， 这 是 告诉 界面 设计 器 此 Layout 中 定义 的 界面 与 
MainActivity 类 关联 。 其 实 真正 的 关联 是 由 Java 代码 决定 的 ， 可 以 与 这 里 不 一 致 ， 但 不 会 影响 
运行 。 

android:id="@+id/imageView" 

这 个 属性 是 为 控件 设置 ID。ID 是 一 个 控件 的 唯一 标志 , 此 处 的 ID 叫 作 “imageView2”。 
在 一 个 Layout 文件 中 的 ID 不 能 重复 。“imageView2” 是 ID 的 名 字 ，ID 在 App 运行 时 其 实 
是 一 个 整数 。 如 果 一 个 控件 要 与 另 一 个 控件 发 生 关系 ， 那 么 就 是 通过 ID 来 引用 另 一 个 控件 。 
不 仅 控件 要 有 ID， 所 有 的 资源 都 有 ID， 比如 我 们 这 个 Layout 文件 activity_main.xml， 它 的 ID 
名 字 就 是 文件 名 activity main. 


5 e 3 ConstraintLayout 


所 有 叫 “Layout” 的 控件 都 是 用 于 排版 的 ， 就 是 它 能 决定 所 包含 的 子 控件 的 位 置 。 这 些 
Layout 控件 有 个 特点 : 可 以 包含 多 个 子 控件 。 不 同 的 Layout 控件 排列 子 控件 的 方式 不 一 样 。 
ConstraintLayout 是 既 好 用 又 强大 的 一 个 ， 能 够 应 付 复杂 的 需求 ， 而 且 运行 效率 很 高 ， 一 些 由 
多 个 简单 Layout 组 合 实现 的 界面 应 该 改 由 一 个 ConstraintLayout 来 实现 。 当 然 它 也 不 是 万 能 的 。 

我 们 现在 的 界面 就 是 采用 了 ConstraintLayout 作为 根 容 器 ， 如 图 5-26 所 示 。 


Layouts — W ScrollView 
se Switch 


Component Tree 


“U ConstraintLayout 
Ab TextView- "Hello Word!" 
四 imageView 


5-26 
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红色 叹 号 图 标 表 示 有 错误 , 与 imageView 控件 在 同一 行 , 说 明 错误 就 出 在 imageView 上 。 
用 鼠标 点 一 下 这 个 图 标 ， 会 在 底部 出 现 一 个 窗口 ， 显 示 详 细 错误 信息 ， 如 图 5-27 所 示 。 


1 Warning 1 Error 


Message 
~ © Missing Constraints in ConstraintLayout 


This view is not constrained. It only has designtime positions, so it will jump to (0,0) at 
runtime unless you adé the constraints 


The layout editor allows you to place widgets anywhere on the canvas, and it records the 
current position with designtime attributes (such as laycut_editor_absoluteX) These 
attributes are notapplied at runtime, so if you push your layout on a device, the widgets 
may appear in a different location than shown in the editor. To fix this, make sure a widget 
has both horizontal and vertical constraints by dragging from the edge connections 


Issue id: Missing Constraints 
图 5-27 


普 误 标题 的 意思 是 : 在 ConstraintLayout 中 缺少 Constraint (约束 ) 。 详 细 内 容 的 第 一 段 意 
思 是 : 这 个 控件 没有 被 约束 。 它 只 有 设计 时 位 置 ， 于 是 在 运行 时 会 跳 到 (0.0) 坐 标 处 ， 除 非 添加 
了 约束 。 那 什么 是 约束 呢 ? 下 节 分 解 ! 


5.8.1 ConstraintLayout 的 原理 


Constraint 是 “约束 ”的 意思 。 我 们 可 以 为 ConstraintLayout 的 子 控件 添加 约束 , 那 添加 什 
么 约束 呢 ? 位 置 上 的 约束 。App 要 面 对 的 设备 屏幕 有 大 有 小 、 有 方 有 圆 、 有 宽 有 窄 ， 要 想 设计 
一 套 界面 来 适应 不 同 的 屏幕 非常 难 , 比如 不 可 能 用 固定 距离 的 方式 来 保持 一 个 控件 在 横向 上 居 
中 。 有 了 ConstraintLayout 后 可 以 克服 这 种 困难 ， 可 以 为 一 个 控件 添加 一 个 “保持 横向 居中 ” 
的 约束 ， 无 论 在 任何 屏幕 上 都 能 横向 居中 。 

可 以 设置 什么 样 的 约束 呢 ? 例如 : 


e 设置 子 控件 左边 或 右边 与 ConstraintLayonut 的 左边 或 右边 对 齐 , 以 保持 子 控件 居 左 或 居 右 。 

e 设置 子 控件 下 边 或 上 边 与 ConstraintLayout 的 上 边 或 下 边 对 齐 , 以 保持 子 控件 居 上 或 居 下 。 

e 设置 子 控件 在 ConstraintLayout 中 横向 居中 、 纵 向 居中 或 者 横向 纵向 都 居中 。 

e 设置 子 控件 在 ConstraintLayout 中 居中 偏 左 、 偏 右 、 偏 上 或 偏 下 。 

e 设置 同属 于 一 个 ConstraintLayout 的 子 控件 A 在 子 控件 B 的 上 面 、 下 面 、 左 边 或 右边 。 

e 设置 同属 于 一 个 ConstraintLayout 的 子 控件 A 与 子 控件 B 左边 对 齐 、 右 边 对 齐 、 上 边 对 齐 
或 下 边 对 齐 。 


还 可 以 设置 子 控件 本 身 的 约束 ， 比 如 : 


e 宽 和 高 保持 n:m 的 比率 。 

e 宽 或 高 为 某 个 固定 的 值 。 

e 宽 或 高 由 内 容 决定 ， 比 如 文本 控件 的 大 小 由 文本 中 文字 的 个 数 决定 ， 图 像 控件 的 大 小 由 图 
像 的 实际 大 小 决定 。 
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5.3.2 ” 子 控 件 在 ConstraintLayout 中 居 左 或 居 右 


当前 的 页 面 中 ，TextView 控件 已 经 居中 了 。 我 们 把 它 删 掉 ， 用 ImageView 来 试 一 下 。 删 
除 一 个 控件 很 简单 ， 选 中 它 并 右 击 ， 在 出 现 的 快捷 菜单 中 选择 “Delete” 命 令 ， 也 可 以 选中 它 
直接 按 Delete 键 。 但 是 ， 有 时 可 能 因为 种 种 原因 不 好 选中 控件 ， 这 时 可 以 从 控件 树 中 选中 ， 
如 图 5-28 所 示 。 


Component Tree. 


"UÙ ConstraintLayout. 
Ab TextView 


Efl imageView 


图 5-28 


出 掉 控 件 之 后 ， 只 剩 下 图 像 了 。 现在 未 给 图 像 控件 加 任何 约束 ， 所 以 它 就 在 我 们 当初 放置 
的 位 置 上 。 我 们 可 以 为 图 像 添加 靠 左 的 限制 , 使 其 靠 左 显示 。 选 中 图 像 ， 在 图 像 上 会 出 现 一 些 
帮助 设计 的 图 形 ， 移 动 鼠标 到 图 像 左边 界 中 央 的 小 圈 圈 上 ， 如 图 5-29 所 示 。 


Component Tree 


^L ConstraintLayout 
四 imageView 


图 5-29 


从 这 个 小 转圈 中 拖 出 一 条 线 ， 代 表 约束 。 这 里 要 靠 左 ， 所 以 
把 这 条 线 往 父 控件 的 左边 界 拖 , 当 拖 到 左边 界 时 图 像 的 边框 竟然 
动 了 ! 不 要 惊慌 ， 只 需 松 手 即 可 ， 出 现 如 图 5-30 所 示 的 效果 。 

小 圈 圈 中 多 了 个 点 ， 表 示 在 图 像 的 这 条 边 上 添加 了 约束 。 这 
个 约束 是 图 像 的 左边 界 到 ConstraintLayout 左边 界 的 约束 。 在 属 
性 栏 的 简洁 模式 下 , 也 可 以 看 到 约束 被 添加 了 , 如 图 5-31 所 示 。 

在 四 条 边 中 , 只 有 左边 添加 了 约束 .数字 8 其 实 是 “8dp”， 
这 里 把 单位 隐藏 了 ,意思 是 这 个 控件 的 左边 界 与 ConstraintLayout 
的 左边 界 不 要 靠 得 太 紧 ， 留 出 8dp 的 空白 。 在 属性 栏 显示 所 有 属 
性 的 模式 下 ， 也 可 以 看 到 这 个 约束 的 设置 ， 如 图 5-32 所 示 。 

虽然 可 以 直接 通过 为 相应 的 属性 设置 值 来 添加 约束 , 但 是 不 
太 直 观 ， 还 是 尽量 用 鼠标 拖 动 。 


5-30 
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Attributes 


id imageView 
layout width 200dp 


E s 200dp 


« Constraints 
start toStartOf parent 


baseline creator ans EE 


baseline toBaselineOf 


5.31 5-32 


在 组 件 树 中 依然 能 看 到 imageView 有 错误 ， 还 缺少 约束 。 为 什么 呢 ? 原因 很 简单 ， 坐 标 
有 两 个 ， 即 横 坐 标 和 纵 坐 标 ， 现 在 只 设 了 横 坐 标 ， 还 没 设 纵 坐标 ， 在 纵向 上 Layout 系统 依然 
不 知道 该 把 imageView 往 哪个 位 置 放 。 由 于 默认 位 置 是 0， 因 此 运行 时 会 跑 到 最 上 面 。 若 想 让 
它 靠 下 显示 ， 就 添加 下 边界 的 约束 ， 如 图 5-33 所 示 。 


ImageView 
srcCompat. Gdraviable/female 


Z sicCompat. 


contentDescripti 


background 


scaleType 


图 5-33 


运行 App， 图 像 是 不 是 靠 左 下 角 了 ? 这 种 Layout 设计 方式 真 的 很 人 性 化 ， 简 单 又 好 玩 ! 
至 于 怎样 让 图 像 靠 其 他 位 置 ， 读 者 可 以 自己 尝试 ， 这 里 就 不 讲 了 。 


5.3.3 ” 子 控 件 在 ConstraintLayout 中 横向 居中 
只 要 在 前 面 的 基础 上 再 添加 一 个 靠 右 的 约束 就 行 了 ， 如 图 5-34 所 示 。 


8 v-$— —$-5 ~ 
| 


Imageview 
srcCompat @drawable/femal 


Z srcCompat 


contentDescripti 


background. 


5-34 
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这 个 效果 是 不 是 很 直观 ? Constraint 就 像 弹簧 ， 如 果 控 件 左右 都 有 弹簧 并 且 受 力 相等 ， 它 
就 位 于 中 央 了 。 
上 下 居中 就 不 再 讲 了 ， 读 者 可 以 自己 尝试 。 


5.3.4 ” 子 控 件 在 ConstraintLayout 中 居中 偏 左 


现在 图 像 左 右 居中 了 ,还 不 理想 , 想 让 它 居 中 再 偏 左 一 点 , 最 好 在 四 分 之 一 处 居中 而 不 是 
在 二 分 之 一 处 居中 。 没 问题 ， 可 以 用 图 5-35 中 的 设置 。 


srcCompat Odrawable/female 
s” srcCompat. 


contentDescription 


background 


scaleType 


图 5-35 


这 个 柄 上 有 一 个 数字 “50”, 表示 左右 两 边 约束 的 力量 比值 , 现在 是 50:50, 拖 动 它 试 试 。 
比如 拖 到 25 的 位 置 ( 左 25: 右 75) ， 效 果 如 图 5-36 所 示 。 

Zt GRO RE, 左右 弹簧 的 力量 进行 对 比 , 哪 边 力 大 , 就 偏向 哪 边 。 纵 向 上 没有 类 似 的 柄 ， 
因为 纵向 上 只 有 向 下 拉 的 弹簧 ,没有 向 上 拉 的 弹 筑 , 无 法 设置 其 力量 对 比 ， 只 要 加 上 向 上 约束 
即 可 。 


Imageview 
srcCompat @drawable/female 


4 srcCompat 


contentDescription 
background 
scaleType 


adjustViewBounds fu] 
cropToPedding m 


Fd 5-36 
5.3.5 FIR A 在 子 控件 B 的 上 面 


为 了 演示 两 个 控件 之 间 的 相对 位 置 约束 , 我 们 需要 再 添加 一 个 新 的 控件 ,比如 添加 一 个 按 
钮 ， 最 终 让 按钮 位 于 图 像 的 上 面 。 在 此 之 前 ， 需 要 为 图 像 控 件 添加 纵向 的 约束 ， 先 让 它 横 、 纵 
向 都 居中 ， 如 图 5-37 所 示 。 
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ImageView 
srcCompat Gidrawable/female 


Z srcCompet 
contentDescription 
background 


EEEE o 
图 5-37 
再 拖 一 个 按钮 进来 〈 见 图 5-380. 。 这 个 按钮 由 于 没有 约束 ， 因 此 运行 时 会 跑 到 左上 角 。 
下 面 为 它 添 加 约束 ， 从 按钮 的 下 边界 拖 动 约束 到 图 像 的 上 边界 ,让 它 在 图 像 的 上 面 , 如 图 5-39 
所 示 。 


BiU ScrollView 
is 8 Switch 


图 5-39 


5.3.6 子 控 件 A 与 子 控件 B 左边 对 齐 


在 上 一 节 的 页 面 中 ,按钮 在 横向 上 没有 约束 ， 默 认 靠 左 。 看 着 不 太 舒 服 ， 我 们 可 以 让 按钮 
的 左边 与 图 像 的 左边 对 齐 , 也 就 是 为 按钮 的 左边 界 与 图 像 的 左边 界 拖 出 一 条 约束 线 , 如 图 5-40 
所 示 。 
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图 5-40 
两 条 优美 的 曲线 揭示 了 约束 的 存在 。 不 过 , 仔细 看 的 话 , 会 发 现 按钮 的 左边 与 图 像 的 左边 
还 有 一 点 差距 ， 没 有 完全 对 齐 ， 其 实 是 按钮 的 margin 属性 在 起 作用 ， 只 要 把 它 的 左 margin 改 
为 0dp 即 可 ， 如 图 5-41 所 示 。 


图 5-41 


5.3.7 ”设置 子 控件 的 宽 和 高 
以 图 像 控 件 为 例 ， 当 前 宽 和 高 为 固定 值 ， 从 属性 栏 中 可 以 看 出 来 〈 见 图 5-42) 。 


图 5-42 


注意 红线 框 出 的 图 形 ， 这 样 就 表示 固定 值 ， 那 么 值 是 多 少 呢 ? Hp "layout width” 和 
“1layout height” 属 性 的 值 决定 。 在 红 框 中 的 图 形 上 点 一 下 ， 就 会 发 现 图 形 发 生 了 变化 ， 如 图 
5-43 所 示 。 
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图 形变 成 了 弹簧 的 样子 ， 表 示 宽 度 变 成 了 弹性 值 ， 即 宽度 是 可 变 的 ， 同 时 可 以 看 到 
layout width 的 值 变 成 了 “0dp”， 此 时 只 要 两 边 没有 其 他 控件 来 挤占 它 的 空间 ， 那 么 它 就 会 
充满 整个 空间 ， 此 时 在 预览 图 中 可 以 看 到 图 像 的 宽度 充满 了 整个 父 控件 。 

5.3.8 ” 子 控 件 的 宽 和 高 保持 一 定 比例 

设置 图 像 控 件 宽 高 比 为 2:1， 就 是 说 图 像 被 缩放 时 控件 的 宽 高 比例 不 变 。 

为 了 更 容易 看 出 效果 ， 我 们 给 图 像 控件 设置 一 下 背景 (设置 控件 的 background 属性 ) 。 
可 以 为 它 设置 一 种 颜色 ， 也 可 以 设置 一 幅 图 像 。 先 选中 图 像 控件 ， 再 在 属性 栏 中 单 击 图 5-44 
所 示 的 按钮 。 出 现 资源 选择 对 话 框 ， 选 择 一 种 颜色 即 可 〈 见 图 5-45) 。 


~ ImageView 
srcCompat @drawable/female 


Z srcCompat 
contentDescription 
background 


scaleType 


P Project 
Name: holo blue bright 


|* android 


B 


background light 


B- 
| | darker gray 


图 5-45 
设置 背景 后 ,再 设 一 下 图 像 控 件 的 宽 高 比 。 首 先 选中 图 像 控 件 ， 然 后 在 属性 栏 中 单 击 上 面 
红色 箭头 所 指 的 位 置 ， 如 图 5-46 所 示 。 


FirstCotlinApp 


8 |7 8 v 
. ratio 
14 v 11 
^ ImageView 
srcCompat Gdrawable/female 
4! srcCompat. 
contentDescription. 


图 5-46 
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在 下 面 箭头 所 指 的 位 置 出 现 ratio (比率 ) 输入 控件 (默认 值 是 1:1)， 图 像 控 件 变 成 方 的 。 
注意 ， 此 时 控件 的 layout width 和 layout height 属性 值 是 有 一 定 要 求 的。 如 果 这 两 个 属性 的 值 
全 不 是 0dp， 那 么 比率 就 不 起 作用 了 ， 至 少 要 有 一 个 是 0dp 才 起 作用 ， 另 一 个 既 可 以 是 固定 的 
数值 ， 也 可 以 是 match parent 或 wrap_content。 如 果 既 设置 了 宽 和 高 的 值 又 设置 了 比例 ， 明 显 
是 有 冲突 的 ， 该 怎么 解决 呢 ? 其 实 就 是 优先 级 的 问题 ， 谁 优先 级 高 谁 起 作用 。 

把 比例 改 成 2:1( 宽 是 2， 高 是 1) ， 则 会 出 现 图 5-47 所 示 的 效果 。 


layout width match constraint 


layout height 100dp 


FirstCotlinApp 


@drawable/female 


图 5-47 


实际 上 图 像 太 宽 ， 已 超出 了 显示 区 ， 于 是 把 高 度 改 小 一 些 ， 改 成 100dp 注 意 此 时 应 保证 
宽度 为 match constraint. match constraint 是 一 个 常量 ， 它 的 值 就 是 “0dp”) 。 最 后 layout 
文件 的 源码 如 下 : 


<?xml version="1.0" encoding="utf-8"?> 

<android. support.constraint.ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:tools-"http://schemas.android.com/tools" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context-".MainActivity"^ 

«ImageView 

android:id-"Grid/imageView" 
android:layout width-"0dp" 
android:layout height-"100dp" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:layout marginEnd-"8dp" 
android:layout marginBottom-"8dp" 
android:background-"8android:color/ holo blue bright" 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintDimensionRatio-"w,2:1" 
app:layout constraintEnd toEndOf-"parent" 
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app:layout constraintStart toStartOf-"parent" 

app:layout constraintTop toTopOf-"parent" 

app:srcCompat-"8Gdrawable/female" /> 

«Button 

android:id="@+id/button" 

android:layout_width="wrap_content" 

android:layout_height="wrap_content" 

android:layout_marginBottom="8dp" 

android:text="Button" 

app:layout constraintBottom toTopOf="@ *id/imageView" 

app:layout constraintStart toStartOf-" Gxid/imageView" /> 
«/android.support.constraint.ConstraintLayout^ 


与 .处 ”设计 登录 页 面 


下 面 设 计 一 个 登录 页 面 。 这 个 登录 页 面 最 上 面 是 一 幅 图 像 ， 中 间 是 用 户 名 输入 框 ， 接 着 是 
密码 输入 框 ， 最 下 面 是 登录 按钮 。 

为 了 美观 一 些 , 希望 这 些 内 容 整 体 居 中 (纵向 居中 ) 显示 ， 因 为 屏幕 一 般 都 是 紧 着 的 。 可 
以 把 文本 输入 控件 和 按钮 控件 的 高 度 设置 为 “wrap_content”， 即 由 文本 的 字体 大 小 决定 高 度 
(这 个 值 不 会 太 大 ) 。 图 像 控 件 的 大 小 也 由 内 容 (也 就 是 图 像 ) 来 决定 的 话 就 不 合适 了 ， 可 能 
很 小 , 也 可 能 很 大 。 所 以 我 们 应 该 把 图 像 控件 设置 成 合适 的 固定 大 小 , 然后 让 图 像 保持 比例 缩 
放 来 自 适 应 地 填充 到 图 像 控 件 中 。 总 之 , 一 般 情况 下 都 是 为 图 像 控 件 指定 固定 的 大 小 。 至 于 文 
本 输入 控件 ， 也 不 让 它 在 横向 上 充满 整个 父 控件 ， 所 以 将 宽度 设置 为 固定 值 ， 高 度 则 由 其 内 容 
决定 。 

纵向 上 的 居中 怎么 设置 好 呢 ? 如 果 让 图 像 在 纵向 上 居中 , 其 他 控件 以 它 为 基准 往 下 摆 , 整 
体内 容 看 起 来 就 会 偏 下 , 不 如 以 图 像 下 面 的 用 户 名 输入 框 为 基准 。 把 用 户 名 输入 框 设置 为 在 容 
器 控件 中 纵向 居中 ， 其 他 控件 都 以 它 为 基准 上 下 摆 放 ， 效 果 如 下 : 


图 像 控 件 
用 户 名 输入 框 


密码 输入 框 
登录 按钮 


下 面 让 我 们 一 步 一 步 设计 出 这 个 登录 界面 。 
5.4.1 添加 用 户 名 输入 控件 


修改 当前 的 Activity 界面 (res/layout/activity_main xml) ， 在 当前 的 基础 上 改造 一 下 。 先 
把 “Hello World” 这 个 文本 控件 删 掉 ， 用 不 着 了 。 
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当前 ， 图 像 控件 处 于 纵向 居中 ,我 们 先 把 它 移 到 顶端 。 很 简单 ， 把 图 像 控 件 下 边界 的 约束 
删 掉 即 可 。 

然后 , 拖 一 个 文本 输入 控件 到 页 面 内 ,在 “Text” 组 中 拖 一 个 “Plain Text” 控 件 到 页 面 中 ， 
放 在 图 像 控件 的 下 面 ， 如 图 5-48 所 示 。 


Qu r|- SS- DNeu4- w28- »©35%@g 
Ab TextView © sp, J. X iB- IE I 


æ 

Ab password 

Ab password (NuÑeric) 
2b E-mail 

Ab Phone 


2b Postal Address. 

A Multiline Text 

Ab Time 

Ab Date 

Ab Number 

Ab Number (Signed) 
Ab Number (Decimal) 


Mb Aca remet E 


5-48 


为 了 保证 文本 输入 控件 在 运行 时 真 的 位 于 图 像 控件 下 面 , 需要 在 图 像 的 下 边界 与 文本 框 的 
上 边界 之 间 添 加 一 个 约束 。 这 个 约束 的 默认 Margin 为 8dp, 离 得 太 近 了 , 改 成 16dp, 如 图 5-49 
所 示 。 


FirstCotlinApp 


图 5-49 


我 们 还 应 让 文本 框 左右 居中 。 另 外 ， 文 本 框 的 宽度 默认 是 wrap_content， 但 是 一 般 我 们 都 
希望 它 在 横向 上 充满 整个 空间 , 只 要 把 layout. width 属性 改 为 match_constraint (或 0dp ) 即 可 ， 
如 图 5-50 所 示 。 


layout width — atch constraint 


ud wrap content 
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注意 ，“Text” 这 个 组 下 有 很 多 控件 ， 比 如 “Email”“Phone” 等 。 这 些 控 件 用 于 输入 不 
同 的 文本 格式 ,“Email” 是 专门 输入 邮箱 地 址 的 控件 ,“Phone” 是 专门 输入 电话 号 码 的 控件 。 
但 是 ， 其 实 它们 是 同一 个 类 〈 这 个 类 叫 作 “EditText”) ， 只 是 把 EditText 的 某 些 属性 预 设 成 
了 不 同 的 值 ， 我 们 完全 可 以 自己 改变 这 些 值 。 现 在 使 用 最 通用 的 一 种 “Plain Text”， 对 输入 
文本 的 格式 没什么 限制 ， 因 为 用 户 名 一 般 都 没有 限制 。 

只 有 文本 输入 控件 还 不 行 , 还 要 有 提示 性 文字 ， 以 告诉 用 户 这 个 地 方 应 输入 什么 。 以 前 都 
是 将 一 个 文本 显示 控件 (比如 TextView) 。 放 在 输入 框 的 左边 或 上 边 ， 提 示 应 输入 什么 ， 现 
在 的 做 法 变 了 ， 变 成 了 直接 在 输入 框 中 显示 提示 ， 这 在 Android 中 很 容易 做 到 ， 只 需 设 置 输入 
控件 的 “hint (提示)〉” 属 性， 如 图 5-51 所 示 。 


FirstCotlinApp u SHARP 


style editTextStyle 


singleLine g 
selectAllOnFocusu] 
Y TextView 


图 5-51 


注意 ， 必 须 将 text 属性 的 值 清空 才能 显示 出 
hint 的 值 。 

因为 其 他 控件 要 相对 它 的 位 置 摆 放 ， 需 要 引 
用 它 ， 所 以 还 要 设置 它 的 ID， 界 面 设计 器 会 自动 
为 它 取 个 ID， 最 好 为 它 的 ID 设置 一 个 有 意义 的 
名 字 ， 如 图 5-52 所 示 。 图 5-52 

修改 ID 时 ，Android Studio 会 弹出 一 个 对 话 框 ， 如 图 5-53 所 示 。 


editTextName 
layout width match constraint 


layout height 41dp 


Update usages as well? 
This will update all XML references and Java R field references. 


口 Don't ask again during this session 


图 5-53 


提示 是 否 真 要 更 新 ID, 因为 更 新 ID 会 更 新 XML 文件 中 所 有 的 引用 和 R 类 中 相应 字段 的 
值 。 单 击 “Yes” 按 钮 。 为 了 以 后 不 再 让 它 出 来 添 麻烦 ， 最 好 选中 “Don't ask again during this 
session (不 要 在 这 次 会 话 中 再 问 了 ) ”。 


5.4.2 ”添加 密码 输入 控件 
添加 密码 输入 控件 ， 效 果 如 图 5-54 所 示 ， 并 将 ID 设置 为 “editTextPassword”。 
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5.4.8 ”添加 登录 按钮 
参考 前 面 的 内 容 进行 设置 ,只 是 把 ID 设置 为 “buttonLogin”, 效果 如 图 5-55 所 示 。 注 意 ， 
修改 标题 的 方式 是 设置 其 text 属性 的 值 。 


backgroundTint 


backgroundTintN none 


5.4. “完成 收工 


最 后 把 头像 设置 一 下 ， 取 消 宽 高 比 〈 在 设置 宽 高 比 的 地 方 再 点 一 下 就 取消 了 )， 将 宽 高 都 
设 为 100dp。 最 终 的 layout 源码 如 下 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«ScrollView xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context-".MainActivity"^ 


«android.support.constraint.ConstraintLayout 
android:layout width-"match parent" 
android:layout height-"match parent" 


android:layout gravity-"center vertical"^ 


«ImageView 
android:id="@+id/imageView" 
android:layout_width="100dp" 
android:layout_height="100dp" 
android:layout_marginStart="8dp" 
android:layout_marginTop="8dp" 
android:layout_marginEnd="8dp" 
android:background="@android:color/ holo blue bright" 
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app:layout constraintEnd toEndOf-"parent" 

app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toTopOf-"parent" 
app:srcCompat-"8drawable/female" /> 


X«EditText 
android:id-"G(4id/editTextName" 
android:layout width-"Odp" 
android:layout height-"41dp" 
android:layout marginStart-"8dp" 
android:layout marginTop-"16dp" 
android:layout marginEnd-"10dp" 
android:ems-"10" 
android:inputType-"textPersonName" 
app:layout constraintEnd toEndOf- 


parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"(id/imageView" /> 


X«EditText 
android:id-"G(*id/editTextPassword" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"16dp" 
android:layout marginEnd-"8dp" 
android:ems-"10" 
android:hint=" 请 输入 密码 " 
android:inputType-"textPassword" 


app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
@+id/editTextName" /> 


app:layout constraintTop toBottomOf- 


«Button 
android:id-"G(*id/buttonLogin" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"16dp" 
android:layout marginEnd-"10dp" 
android:text-" Ek" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"8(-id/editTextPassword" /> 


«Button 
android:id-"Qrid/buttonRegister" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
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android:layout marginTop-"1i6dp" 

android:layout marginEnd-"8dp" 

android:text=" 注 册 " 

app:layout constraintEnd toEndOf-"parent" 

app:layout constraintStart toStartOf-"parent" 

app:layout constraintTop toBottomOf-"8-id/buttonLogin" /> 


«/android.support.constraint.ConstraintLayout^ 
«/ScrollView» 


了 .了 让 内 容 滚动 


在 上 一 节 做 的 登录 页 面 上 增加 一 个 按钮 “注册 ”, 将 用 设 为 “buttonRegister”， 放 到 “ 登 
录 ” 按 钮 的 下 面 , 效果 如 图 5-56 所 示 。 然后 运行 App, 旋转 一 下 屏幕 , 运行 效果 如 图 5-57 所 示 。 

“注册 ”按钮 看 不 到 了 ! 为 什么 ? 显然 屏幕 的 高 度 不 够 了 ， 内 容 在 纵向 上 超出 了 屏幕 ， 怎 
么 办 呢 ? 使 用 滚动 条 ! 然而 ，Layout 是 没有 滚动 功能 的 ， 要 想 提供 滚动 功能 ， 需 要 使 用 控件 
ScrollView。 

ScrollView 可 以 在 子 控件 高 度 超出 自己 的 范围 时 在 纵向 上 提供 滚动 功能 。 如 果 想 横向 滚动 ， 
可 以 使 用 HorizontalScrollView。 各 种 ScrollView 都 有 自己 的 要 求 : 只 能 容纳 一 个 子 控件 。 


图 5-56 5-57 


我 们 让 ConstraintLayout 成 为 ScrollView 的 子 控件 ， 然 后 设置 ConstraintLayout 的 高 度 由 
其 内 容 决定 ， 也 就 是 由 组 成 登录 界面 的 各 子 控件 来 共同 决定 。ScrollView 必须 有 办 法 计算 出 其 
子 控件 的 高 度 才 行 ， 否 则 不 知道 该 怎么 滚 。 所 以 ConstraintLayout 被 放 在 ScrollView 中 后 ， 其 
高 度 不 能 再 设 为 match parent， 如 果子 控件 的 高 度 永 远 与 它 一 样 高 ， 那 么 永远 不 需要 滚动 。 其 
子 控件 应 体现 出 内 容 的 高 度 ， 这 里 也 就 是 组 成 登录 功能 的 控件 共同 占据 的 高 度 ， 所 以 
RelativeLayout 的 layout_height 值 必须 为 wrap_content。 下面 我 们 按照 这 个 原理 一 步 步 改 造 界面 。 
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可 以 试 着 拖 一 个 ScrollView 到 页 面 中 ， 如 图 5-58 所 示 。 
不 行 ， 无 法 将 控件 拖 到 页 面 中 作为 最 外 层 的 控件 ， 此 时 需要 


手动 编辑 源码 。 把 页 面 切换 到 源码 模式 ， 在 最 外 层 的 元 素 HorizontalScroll 


“<android.support.constraint，ConstraintLayout>” 外 面 添 加 


标记 “<ScrollView>”， 


Widgets — mp Nestedscrolview 


layouts — [r] ViewPager 


在 ConstraintLayout 的 结束 标记 conss i cerdview 
“</android.support，constraint.ConstraintLayout>” 下 面 添 加 
ScrollView 的 结束 标记 “</ScrollView>”， 也 就 是 让 图 5-58 


ScrollView 元 素 包 着 RelativeLayout 元 素 。 然 后 ， 还 需要 把 RelativeLayout 标记 中 的 一 些 属性 
(这 些 属性 必须 放 在 最 外 层 的 元 素 中 ) 移动 到 ScrollView 标记 中 : 


xmlns:android-"http://schemas.android.com/apk/res/android" 


xmlns:tools- 


http: 


//schemas.android.com/tools" 


xmlns:app-"http://schemas.android.com/apk/res-auto" 
tools:context-".MainActivity" 


还 要 为 ScrollView 设置 宽 和 高 。 它 既然 是 最 外 层 的 控件 , 就 应 该 充满 整个 父 控件 (Activity ) 。 
现在 layout 文件 的 源码 变 为 : 


<?xml version-"1.0" encoding-"utf-8"?» 


«ScrollView xmlns: 


android-"http://schemas.android.com/apk/res/android" 


xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 

android:layout height-"match parent" 


tools:context- 


.MainActivity"^ 


«android.support.constraint.ConstraintLayout 
android:layout width-"match parent" 
android:layout height-"match parent"^ 


«ImageView 


android: 
android: 
android: 
android: 


android 
android 


id="@+id/imageView" 
layout_width="100dp" 
layout_height="100dp" 
layout_marginStart="8dp" 


:layout_marginTop="8dp" 
:layout marginEnd="8dp" 
android: 


background="@android:color/. holo blue bright" 


app:layout constraintEnd toEndOf-"parent" 


app:layout constraintStart toStartOf-"parent" 


app:layout constraintTop toTopOf-"parent" 


app:srcCompat-"8Gdrawable/female" /> 


«Button 


android: 


id="@+id/button" 
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android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginBottom-"8dp" 
android:text-"Button" 

app:layout constraintBottom toTopO: 
app:layout constraintStart toStartOf- 


G-id/imageView" 
@+id/imageView" /> 


«EditText 
android:id="@+id/editTextName" 
android:layout_width="0dp" 
android:layout_height="41dp" 
android:layout_marginStart="8dp" 
android:layout_marginTop="16dp" 
android:layout_marginEnd="10dp" 
android:ems="10" 
android:hint=" 请 输入 用 户 名 " 
android:inputType="textPersonName" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"(Hid/imageView" /> 


«EditText 
android:id-"G(id/editText2" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"16dp" 
android:layout marginEnd-"8dp" 
android:ems-"10" 
android:hint=" 请 输入 密码 " 
android:inputType-"textPassword" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"8-id/editTextName" /> 


«Button 
android:id="@+id/button2" 
android:layout_width="0dp" 
android:layout_height="wrap_content" 
android:layout_marginStart="8dp" 
android:layout_marginTop="16dp" 
android:layout_marginEnd="10dp" 
android: text=" E" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"Qid/editText2" /> 


«Button 
android:id-"G(*id/buttonRegister" 
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android:layout width="0dp" 

android:layout height-"wrap content" 

android:layout marginStart-"8dp" 

android:layout marginTop-"16dp" 

android:layout marginEnd-"8dp" 

android:text=" 注 册 " 

app:layout constraintEnd toEndOf-"parent" 

app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"G-id/button2" /> 


«/android.support.constraint.ConstraintLayout-^ 
«/ScrollView» 
切换 到 预览 模式 ， 会 惊奇 地 发 现 ConstrantLayout 的 高 度 变 了 ， 如 图 5-59 所 示 。 虽 然 
ConstraintLayout 的 高 度 值 还 是 match_parent, 但 是 被 放 到 在 ScrollView 中 时 这 个 值 并 不 起 作用 ， 
实际 上 却 变 成 了 wrap_content。 


图 ScroliView 


四 imageview 

"B button 

Ab. editTextName(?i 
Ab. editText2 


Œ button2 
Œ buttorRegister 


图 5-59 
再 运行 App， 旋 转 屏幕 ， 就 可 以 上 下 滚动 了 ， 效 果 如 图 5-60 所 示 。 


图 5-60 
5.5.2 ”禁止 旋转 


除了 使 用 ScrollView 外 ， 还 有 一 个 办 法 可 以 解决 横 屏 显示 不 全 的 问题 ， 那 就 是 不 支持 横 
屏 ! 这 需要 固定 Activity 的 方向 ， 即 在 Manifest 文件 中 设 一 下 ， 如 图 5-61 所 示 。 

属性 名 screenOrientation 表示 屏幕 方向 ， 值 portrait. (原意 是 肖像 画 ， 是 长 的 ) 表示 竖 屏 、 
landscape( 原 意 是 风景 画 ， 是 宽 的 ) 表示 横 屏 。 如 果 不 设 置 此 属性 ， 就 表示 横竖 屏 都 支持 。 
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© 

© build gradie ( 
figradle-wrapper.properti 
Ë proguard-rules.pro 


图 5-61 
5.5.8 ”为 横 屏 和 坚 屏 分 别 创建 Layout 


可 以 为 一 个 页 面 创建 横 屏 和 竖 屏 两 个 资源 。Android App 会 根据 屏幕 方向 自动 选择 资源 ， 
为 横 屏 和 竖 屏 创建 看 起 来 很 不 一 样 的 界面 效果 。 实际 上 这 个 功能 除了 支持 横 屏 和 竖 屏 外 , 还 支 
持 不 同 的 屏幕 分 辨 率 。 当 然 最 好 还 是 用 一 个 Layout 能 自 适 应 横 屏 、 竖 屏 和 各 种 分 辩 率 ， 但 有 
时 是 做 不 到 的 。 

下 面 将 当前 Layout 作为 竖 屏 资源 ， 演 示 一 下 如 何 为 它 创 建 横 屏 资源 。 选 择 菜单 命令 ， 如 
图 5-62 所 示 。 


总 activity mainxml ”| liAndroidManifestaxml * 


Q5 m $7 Q- DNes4- 二 28- 
= Spinner El | V Portrait 
:三 RecyclerView & | Landscape 


ml UI Mode > 
I9 HorizontalScrollView Night Mode 》 


Midgets mms sse me a 
Component Tree - S Create Tablet Variation 


W ScrollView Create Other... 


图 5-62 


选择 “Create Landscape Variation 〈 创 建 横 屏 变 体 ) ”命令 ， 会 为 当前 Layout 添加 一 个 新 
的 资源 文件 。 新 文件 默认 复制 了 原文 件 的 内 容 ， 可 以 在 此 基础 上 进行 修改 ， 比 如 把 ScrollView 
去 掉 ， 因 为 我 们 可 以 在 Landscape 资源 中 以 另 一 种 方式 摆 放 控件 让 它们 充分 利用 横 屏 空间 。 

当前 资源 下 面包 含 了 两 个 文件 ( 见 图 5-630 , 在 文件 系统 中 的 组 织 和 命名 如 图 5-64 所 示 。 


v Wires 
> Ea drawable 
> Ea drawable-v24 
Es Tayout 
i activity mainxml 


Eres 
> B drawable 
v B layout 


v B activity main (2 


layout-land 
n um vix la 
i9 activity main.xml 


éh activity mainxml 


g activity main.xml (land) 


5-63 
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5.5.4 AREP 


现在 还 有 一 个 不 完美 的 地 方 : 内 容 不 居中 。 在 竖 屏 时 ， 内 容 靠 在 上 部 ， 最 好 的 方式 是 屏幕 
足够 时 居中 ， 屏 幕 不 够 时 滚动 。 注 意 ， 要 先 把 横 屏 layout 文件 删 掉 。 

ScrollView 代表 屏幕 (充满 父 控件 ) ，ConstraintLayout 代表 内 容 区 ， 只 要 设置 
ConstraintLayout 在 ScrollView 纵向 上 居中 就 能 达到 目标 。 设 置 方法 有 两 种 : 一 是 查找 
ScrollView 中 是 否 存在 设置 子 控件 摆 放 位 置 的 属性 ， 二 是 查找 ConstraintLayout 中 是 否 存在 设 
置 其 在 父 控件 中 如 何 摆 放 的 属性 。ConstraintLayout 中 有 个 叫 layout_gravity 的 属性 ， 表 示 其 在 
父 控件 中 的 重心 ， 有 很 多 值 可 以 设置 ， 这 里 设置 为 center vertical， 如 图 5-65 所 示 。 


labelFor 
layerType 
layoutAnimation 
layoutDirection 
layoutMode 
layout gravity [center vertical] 
top 
bottom 
left 
right 


fill vertical 
center horizontal 
fill horizontal 
center 

fi 

dip vertical 


图 5-65 
ConstraintLayout 纵向 居中 了 ， 收 工 ! 


5.6 添加 新 的 Layout 资源 


创建 Activity Ff, Android Studio 一 般 会 帮 有 我们 添加 Layout 资源 ， 但 这 不 一 定 满足 我 们 的 
需要 ， 所 以 需要 手动 添加 新 的 Layout 资源 。 

添加 新 的 Layout 资源 ， 其 实 就 是 往 合适 的 文件 夹 下 添加 一 个 XML 文件 。 我 们 应 该 借助 
Android Studio 提供 的 工具 而 尽量 不 要 自己 去 做 ， 具 体 做 法 是 : 在 res/layout 组 上 右 击 ， 在 弹出 
的 快捷 菜单 〈 见 图 5-66) 中 选择 “New” 一 “Layout resource file” 命 令 ， 出 现 “New Resource 
File〈 新 建 资源 文件 ) ”对 话 框 〈 见 图 5-67) 。 


> BẸ mipmal 36 cut. 
> Ifavalues Ti Copy 


‘Gradle Si Ciri+Al] 
p m 
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Eile name: 
Root element: 
Source set: 


Directory name: 


frame test layout 


FrameLayout 


layout 


Available qualifiers: 


A Country Code 
E Network Code 


© Locale 


IS Layout Direction 
E Smallest Screen Width 


FF screen Width. 


Chosen qualifiers: 


Nothing to show 


Cx] | conce! | 


图 5-67 


在 “File name” 字 段 中 要 填 入 资源 文件 名 ， 同 时 也 作为 资源 的 id 名 。 要 注意 其 规则 ， 不 
能 以 数字 开头 ， 单 词 之 间 推 荐 用 下 画 线 分 隔 〈 非 必须 ， 但 最 好 遵守 ) 。 在 “Root element OR 
元 素 ) ”字段 中 填 入 最 外 层 的 Layout 控件 ， 默 认 是 ConstraintLayout， 改 为 FrameLayout, Jt 
余 都 不 用 动 。 下 面 再 解释 一 下 Source set 和 Directory name 选项 。 


* Sourceset: 源码 集 。 它 有 三 个 选项 : main. release, debug. debug 指 的 是 带 有 调试 信息 的 
App 版 本 ,release 是 没有 调试 信息 的 App 版 本 。 在 这 个 对 话 框 里 指 的 是 分 别 包含 在 debug、 
release 版 中 的 代码 和 资源 ， 即 可 以 指定 某 些 文件 只 在 release 版 中 起 作用 、 有 些 文件 只 在 
debug 版 中 起 作用 。 属 于 main 的 文件 在 两 者 中 都 起 作用 。 这 里 一 般 选 择 main。 

e Directory name: 所 在 文件 天 的 名 字 ， 必 须 放 在 Layout 下 。 


单 击 “OK” 按 钮 ， 创 建新 文件 ， 如 图 5-68 所 示 。 


v Eres 
> Ea drawable 


v Ea layout 


dig activity main.xml 


m 
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除了 ConstraintLayout 外 ， 还 有 很 多 其 他 Layout 控件 ， 实 际 上 ConstraintLayout 是 最 复杂 
的 ， 再 学 其 他 Layout 就 感觉 很 简单 了 。 


FrameLayout 


FrameLayout 是 很 简单 的 一 种 Layout， 当 然 也 可 以 容纳 多 个 View， 但 是 并 没有 一 定 的 规 

则 去 排列 多 个 View， 而 是 简单 地 把 它们 堆 盔 在 一 起 ， 后 添加 的 会 盖 住 先 添加 的 。 
上 一 章 我 们 添加 了 一 个 Layout 资源 (frame_test_layout.xml) ， 其 根 控件 是 FrameLayout。 
双击 打开 文件 frame_test_layout.xml, 向 里 面 添加 View, 就 会 发 现 它们 都 堆 在 了 一 起 ( 见 图 6-1)。 


Component Tree 


Ab textView 
8l button3 
*9 switch1 


图 6-1 
FrameLayout 一 般 用 于 整个 页 面 只 有 一 个 子 控件 的 场景 或 用 于 实现 翻 页 效果 的 场景 。 


LinearLayout 


这 种 Layout 也 比较 简单 ， 里 面 的 子 控件 是 依次 排列 的 ， 有 横向 和 纵向 之 分 。 创 建 一 个 新 
的 Layout 文件 ， 设 置 根 元 素 为 LinearLayout〈 见 图 6-2) 。 

这 个 LinearLayout 是 纵向 的 (vertical， 见 图 6-3) ， 宽 和 高 都 是 “match parent”， 也 就 是 
充满 了 整个 容器 的 空间 (这 里 是 预览 ， 可 以 看 到 它 充满 了 除 工 具 栏 之 外 的 整个 屏幕 )。 向 这 个 
Layout 里 面 拖 入 一 些 View， 比 如 加 入 一 堆 按 钮 ， 依 次 纵向 排列 ， 如 图 6-4 所 示 。 
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Eile name: Tinearlayout test 


Root element: TT 


Source set: main 


Directory name: layout 


图 6-2 


Layouts — BI ScrollView ~ LinearLayout 
orientation vertical 
s- 呈 : 
gravity 
Y Favorite. ibutes 
Visibility none 


图 6-3 
LinearLayout 也 有 很 多 好 玩 的 细节 ， 下 面 我 们 一 起 来 玩 一 玩 。 


FirstCotlinApp 


图 6-4 
6.2.1 纵向 LinearLayout 中 子 控件 横向 居中 


把 按钮 的 layout. width 改 为 wrap_content， 出 现 如 图 6-5 所 示 的 效果 。 

要 使 LinearLayout 中 的 子 控件 横向 居中 ， 有 两 种 方式 : 一 是 设置 LinearLayout 的 gravity 
属性 ， 二 是 设置 子 控件 本 身 的 layout gravity 属性 。 

在 第 一 种 方式 中 ，gravity 表示 内 容 的 重心 。 我 们 只 要 让 内 容 的 重心 在 横向 上 处 于 居中 即 
可 。 操 作 方 式 如 图 6-6 所 示 ， 设 置 gravity 的 值 为 “center_ horizontal”《〈 横 向 居中 ) 即 可 。 


bottom 

BUTTON [teft 
Oright 

BUTTON 癌 center_vertical 
[Dfi vertical 

BUTTON center horizontal 
[fill horizontal 

6-5 图 6-6 
采用 第 二 种 方式 时 , 先 把 Layout 控 件 的 gravity 的 值 清空 ,然后 设置 各 按钮 的 Layout_gravity 
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属性 。Layout_gravity 表示 控件 在 容器 中 的 对 齐 方 式 ， 操 作 方 式 如 图 6-7 所 示 。 


layout gravity [center horizontal] 


center vertical 


— RI 


center horizontal 加 


图 6-7 


可 以 设置 控件 在 Layout 中 靠 上 、 靠 下 、 靠 左 、 靠 右 还 是 居中 。 我 们 选择 横向 居中 
(center horizontal) 。 注 意 ， 纵 向 居中 此 时 没有 意义 ， 选 了 也 不 起 作用 。 

第 二 种 方式 可 以 精确 控制 每 个 控件 的 对 齐 方式 , 到 底 用 哪 一 种 ,根据 自己 的 需要 选择 。 有 
一 点 要 注意 ， 有 的 Layout 控件 不 支持 gravity， 那 就 只 能 设置 子 控件 的 layout gravity T o 


6.2.2 子 控 件 均匀 分 布 


虽然 上 一 节 使 按钮 都 居中 了 , 但 是 我 们 还 希望 这 些 按钮 能 在 纵向 空间 上 均匀 分 布 。 此 时 不 
能 再 指望 LinearLayout 有 设置 子 控件 分 布 模式 的 属性 了 ， 得 从 子 控件 入 手 。 

子 控件 有 个 叫 layout_weight〈 在 排版 中 的 比重 ) 的 属性 ， 用 于 设置 子 控件 在 LinearLayout 
中 在 纵向 或 横向 空间 上 所 占 的 比重 。 要 想 让 它 正确 地 起 作用 , 需要 将 子 控件 的 layout. width (在 
横向 LinearLayout 中 时 ) 或 layout_ height (在 纵向 LinearLayout 中 时 ) 设置 为 “0dp”! 

要 均匀 分 布 ， 就 需要 为 各 子 控件 设置 相同 的 layout weight 值 ， 都 设 为 1 时 效果 如 图 6-8 


所 示 。 
FirstCotlinApp layout weight 1 
k text Button 
a ilityHeading [m] 
accessibilityLiveRegion 


accessibilityPaneTitle 
accessibilityTraversalAf 
accessibilityTraversalBe 
allowUndo ic] 
alpha 

» autoLink ü 
autoText 
background 
backgroundTint 
backgroundTintMode 
breakstrategy 


bufferType 


capitalize 


图 6-8 
6.2.3 子 控件 按 比 例 分 布 
上 一 节 讲 到 了 比重 ， 本 节 用 它 来 设置 非 均匀 分 布 。 注 意 ， 要 先 把 所 有 按钮 的 layout_width 
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设置 为 “0dp”。 我 们 把 第 一 个 按钮 的 layout. weight 设 为 “1”, 其 余 的 都 设 为 “2”, 如 图 6-9 
所 示 ， 所 有 按钮 按 比 例 分 配 了 整个 纵向 空间 ， 第 一 个 按钮 与 其 余 按钮 之 间 的 高 度 比例 为 1:2。 

如 果 不 想 让 子 控件 的 layout_height 为 “0dp”， 而 是 一 个 固定 的 值 或 wrap_content， 就 需 
要 把 它 的 layout weight 值 删除 。 比 如 让 第 一 个 按钮 和 最 后 一 个 按钮 的 高 度 都 为 固定 值 ， 其 余 
的 都 按 比 例 充满 剩余 的 空间 ， 就 应 该 把 第 一 个 和 最 后 一 个 按钮 的 layout_weight 值 删除 、 把 
layout_height 设置 为 “wrap_content”， 效 果 如 图 6-10 所 示 。 


FirstCotlinApp 


FirstCotlinApp 


图 6-9 图 6-10 
整个 linear layout test 文件 的 源码 如 下 : 


<?xml version-"1.0" encoding-"utf-8"?» 

*LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:orientation-"vertical"^ 


«Button 
android:id-"Qrid/button4" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"Button" /> 


«Button 
android:id-"Qrid/button5" 
android:layout width-"wrap content" 
android:layout height-"Odp" 
android:layout weight-"2" 
android:text-"Button" /> 
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«Button 
android:id-"Qrid/button6" 
android:layout width-"wrap content" 
android:layout height-"Odp" 
android:layout weight-"2" 
android:text-"Button" /» 


«Button 
android:id="e+id/button7" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"Button" /» 
«/LinearLayout^ 


6.24 用 LinearLayout 实现 登录 界面 


观察 一 下 前 面 登录 界面 的 例子 ， 可 以 发 现 各 控件 都 是 纵向 排列 的 。 我 们 完全 可 以 用 
LinearLayout 代替 ConstraintLayout 来 实现 。 如 果 一 个 界面 需要 多 个 LinearLayout 组 合 才能 实 
现 , 那么 首选 ConstraintLayout。 £875 ConstraintLayout 看 起 来 比较 复杂 , 但 是 对 于 复杂 的 排版 ， 
它们 的 处 理 速度 更 快 。 我 们 这 个 登录 界面 不 属于 很 复杂 的 界面 类 型 ， 所 以 也 适合 以 
LinearLayout 来 实现 。 

创建 一 个 Layout 文件 ， 根 元 素 为 ScrollView 〈 为 了 适应 横 屏 显示 不 了 整个 登录 内 容 的 情 
况 ) ， 如 图 6-11 所 示 。 


Source set: main 


Eile name: linearlaycut login 
Root element: -A 


Directory name: layout 


图 6-11 
创建 文件 之 后 ， 执 行 以 下 操作 : 


(1) 向 其 中 拖 入 一 个 纵向 的 LinearLayout。 

(2) 依次 向 LinearLayout 中 拖 入 ImageView、 Plain EditText、 Password EditText、 Button。 
JEA ImageView 时 选择 要 显示 的 图 像 ， 这 里 选择 前 面 加 入 的 图 像 资源 female.png。 

(3) 修改 各 EditText 控件 的 hint 属性 。 

(4) 把 各 EditText 的 text 属性 的 值 清空 。 

(5) 修改 按钮 的 text 属性 。 

(6) 将 ImageView 的 宽 和 高 都 设 为 “100dp”， 设 置 图 像 的 layout gravity 属性 为 横向 
居中 。 

(7) 设置 LinearLayout 的 layout. gravity 属性 为 纵向 居中 。 


各 控件 的 id 不 太 重要 , 因为 它们 之 间 不 需要 设置 相对 位 置 关 系 。 整 体 界面 如 图 6-12 所 示 。 
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[Legacy 


Component Troe 


E ScrollView 


vertical} 
四 imageviewz 

2b editText(Plair 

Ab editText3(P 

Œ button8- "= 


其 实 还 有 一 点 点 问题 , 就 是 在 横向 上 太 靠近 父 控 dig CAAA 
件 的 边界 ， 一 般 是 习惯 性 留 出 8dp 的 空白 。 设 置 空白 
的 方式 有 两 种 : 一 是 设置 父 控件 的 Padding 属性 〈 见 
图 6-13) ; 二 是 设置 子 控件 的 Margin 属性 。Padding 
表示 内 部 空白 ，Margin 表示 外 部 空白 。 

linearlayout_login.xml 的 内 容 如 下 : 


6-13 


«?xml version="1.0" encoding="utf-8"?> 
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:padding-"8dp"^ 


*LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:layout gravity-"center vertical" 
android:orientation-"vertical"^ 


«ImageView 
android:id-"Q(id/imageView2" 
android:layout width-"100dp" 
android:layout height-"100dp" 
android:layout gravity-"center horizontal" 
app:srcCompat-"8drawable/female" /> 


X«EditText 
android:id-"Qrid/editText" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:ems-"10" 
android:hint=" 请 输入 名 字 " 


android:inputType-"textPersonName" /> 
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<EditText 
android:id="@+id/editText3" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:ems-"10" 
android:hint=" 请 输入 密码 " 


android:inputType-"textPassword" /> 


«Button 
android:id="@+id/button8" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android: text=" E" /> 
</LinearLayout> 
</ScrollView> 


6.3 GridLayout 


Grid 是 网 格 的 意思 ， 就 是 把 显示 区 分 成 mn 行 n 列 ， 每 列 的 宽度 都 一 样 ， 主 要 用 于 表格 式 

的 排版 。 一 个 View 放 在 此 Layout 中 ， 需 要 设置 View 的 layout row (17.55) il layout. column 

〈 列 号 ) 来 决定 View 处 于 第 几 行 第 几 列 。 如 果 一 个 View 跨 多 个 列 或 行 ， 则 使 用 
layout columnSpan 和 layout rowSpan 设置 。 

创建 一 个 Layout 文件 gridview_testxml， 设 置 其 根 View 为 GridLayout， 如 图 6-14 所 示 。 


Component Tree 


FirstCotlinApp 


12: GridLayout 
Wl button9- “Butt 
Will button10- 
Wl button11 
Wil button12 
Will button14- 
Wil button16 
Wii button19 
Wl button20 


BUTTON ANK, MK, MK. 


Ppp 


图 6-14 


文件 的 内 容 如 下 : 


«?xml version="1.0" encoding="utf-8"?> 

<GridLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"match Parent"> 


85 


id 10 Kotlin 编程 通俗 演 》 


86 


«Button 


android: 


android 
android 


«Button 
android 


«Button 


android: 
android: 
android: 
android: 
android: 
android: 


«Button 


android: 
android: 
android: 
android: 
android: 
android: 


«Button 
android 


android 
android 
android 


«Button 


android: 


android 
android 


:layout height 
android: 


:layout heigh 
android: 
android: 
android: 


id-"QG*id/button9" 


:layout width-"wrap content" 


"wrap content" 


text- 


utton" /» 


:id="@+id/button10" 
android: 
android: 
android: 
android: 
android: 
android: 


layout width 
layout heigh 


rap content" 


"wrap content" 


0" 
layout column-"i" 


layout row- 


layout columnSpan-"2" 


text=" 我 很 长 ， 很 长 ， 很 长 。" /> 


id="@+id/button11" 
layout_width="wrap_content" 
layout_height="wrap_content" 
layout_row="2" 
layout_column="3" 
text="Button" /> 


id="@+id/button12" 
layout_width="wrap_content" 
layout_height="wrap_content" 
layout_row="1" 
layout_column="1" 
text="Button" /> 


:id="@+id/button14" 
android: 
android: 
android: 


layout_width="wrap_content" 
layout_height="86dp" 
layout_row="2" 


:layout_rowSpan="2" 
:layout_column="1" 


:text=" 我 很 高 " /> 


id="@+id/button16" 


:layout_width="wrap_content" 


"wrap_content" 


layout_row="1" 


layout_column="2" 
text="Button" /> 
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«Button 
android:id-"Qrid/buttoni9" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout row-"3" 


android:layout column- 
android:text-"Button" /» 


«Button 

android:id-"G*id/button20" 

android:layout width-"wrap content" 

android:layout height-"wrap content" 

android:layout row-"2" 

android:layout column-"0" 

android:text-"Button" /> 
«/GridLayout» 


6 A TableLayout 


TableLayout 与 GridLayout 有 些 类 似 ， 也 是 可 以 分 成 多 行 多 列 的 ， 但 各 行 之 间 是 独立 的 ， 
每 一 行 的 列 数 可 以 不 同 ， 比 如 一 行 是 3 列 ， 而 另 一 行 是 5 列 。 此 Layout 的 每 一 行 又 是 一 个 单 
独 的 Layout 控件 : TableRow。 要 添加 一 行 ， 需 要 先 添加 一 个 TableRow， 再 向 这 TableRow 中 
添加 View。 
创建 一 个 Layout 资源 tablelayout testxml, 设置 其 根 View 为 TableLayout, 如 图 6-15 所 示 。 
TableRow 控件 的 位 置 如 图 6-16 所 示 。 


Common “\ ConstraintLayout 
-I Guideline (horizontal) 
I Guideline (vertical) 
LinearLayout (horiz 
LinearLayout (verti) 
[E] FrameLayout 


Component Tree 


i TableLayout 
TableRow Ok. RE. i... BUTTON 


© radioButton 


BUTTON 


88 button! 3 
v im TableRow 
图 button15 
BB button17- "Butto 
Œ button18 


Containers 18i TableLayout 


Google 
l-I Space 


Legacy 


6-15 图 6-16 
文件 源码 如 下 : 


«?xml version="1.0" encoding="utf-8"?> 
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout width="match parent" 


android:layout height-"match Parent"> 
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*TableRow 
android:layout width-"match parent" 
android:layout height-"match parent" 


android:gravity-"center horizontal"^ 


«RadioButton 
android:id-"G(4id/radioButton" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 


android:text=" 我 很 长 、 很 长 、 很 长 。。。" /> 


<Button 
android:id="@+id/button13" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text-"Button" /> 


</TableRow> 


<TableRow 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:gravity="center_horizontal"> 


<Button 
android:id="@+id/button15" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text-"Button" /> 


<Button 
android:id="@+id/button17" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text-"Button" /> 


<Button 
android:id="@+id/button18" 
android:layout_width="wrap_content" 


android:layout_height= 

android:text-"Button" /> 
</TableRow> 
</TableLayout> 


wrap_content" 
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界面 设计 出 来 后 , 还 不 能 响应 用 户 的 指令 触发 业务 逻辑 的 执行 , 也 不 能 根据 情况 改变 自身 
的 状态 ， 需 要 用 代码 让 控件 活 起 来 。 


7.1 & Activity 中 创建 界面 


Activity 虽然 代表 一 个 页 面 ， 但 是 不 是 View， 却 能 够 管理 View。 我 们 虽然 可 以 使 用 代码 
将 一 个 Activity 上 的 控件 一 个 一 个 创建 出 来 并 摆好 位 置 来 构成 Activity 的 界面 ， 但 是 太 麻烦 ， 
以 后 的 改动 也 非常 难 ， 所 以 通常 都 是 在 Layout 资源 中 定义 Activity 的 界面 。App 在 显示 一 个 
Activity 前 会 把 Layout 中 定义 的 界面 创建 出 来 并 设置 给 Activity, 之 后 再 把 Activity 显示 出 来 。 
Activity 的 内 容 是 由 里 面 的 控件 组 合 出 来 的 。 

App 并 不 会 自动 从 Layout 资源 创建 界面 并 设置 给 Activity, 需要 我 们 写 代码 完成 一 一 并 不 
复杂 , 只 需要 调用 Activity 的 方法 setContentView0O 即 可 。 这 个 方法 需要 一 个 参数 ,就 是 Layout 
资源 文件 的 id。 这 个 方法 在 Activity 被 创建 之 后 还 未 显示 出 来 之 前 调用 。 最 适合 的 地 方 就 是 
Activity 的 onCreate() 方 法 〈 见 图 7-1) 。 


[F Android + o*is- 1| f, MainActivitykt ~ 
v mapp 1 package con.exanple.niu.firstcotlinapp 
manifests 


import android.support.v7.app.AppcompatActivity 


2 
3 
v jen 4 inport android.os.Bundle 
. uM 
m example. 
Es UM COUP 6 class MalnActi DN, : Appconpatactivity() ( 

- * 

5 sw 


override fun oncreate(savedInstancestate: Bundle?) { 
super .onCreate(savedInstanceState) 
| setcontentView(R. layout activity main) | 
) 


> Fwandroidxversionedparceleble |12 } 


图 7-1 


方法 setContentView() 方 法 是 不 是 被 调用 了 ? 在 onCreate() 方 法 被 调用 之 后 经 过 不 长 的 时 
间 , Activity 就 被 显示 出 来 .由 于 显示 之 前 已 创建 好 了 控件 并 加 载 了 , 因此 我 们 就 看 到 了 Activity 
的 界面 。Android Studio 己 帮 我 们 添加 了 这 些 代码 ,不 需要 手动 输入 , 但 是 它们 也 不 是 SDK 中 
的 类 已 封装 好 的 ， 所 以 还 是 相当 于 我 们 手动 添加 的 。 
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7.1.1 XR 


setContentView() 的 实 参 是 R.layoutactivity main。 它 是 一 个 整数 常量 ,是 Layout 型 资源 文 
fF activity main xml 的 id. 

“R” 是 一 个 类 , 是 Gradle 编译 项 目 中 的 资源 文件 后 自动 产生 的 (我 们 不 能 改动 它 的 内 容 )。 
Layout 资源 文件 的 id 名 与 文件 名 相同 ， 而 扩展 名 被 忽略 。 文 件 名 要 成 为 类 中 常量 的 名 字 ， 所 
以 不 能 以 数字 开头 。 

资源 id 的 命名 一 般 是 “R. 资 源 类 型 .id 名 ”， 比 如 引用 一 个 资源 中 定义 的 字符 串 , 其 id 为 

"xxx" , 就 用 “R.string.xxx”; 引用 一 个 图 片 Gd 也 为 “xxx”)，, 就 用 “R.drawable.xxx”; 
引用 Layout 资源 (比如 activity_main.xml) 中 的 某 个 控件 (id 为 “xxx”)， 就 用 “R.id.xxx”。 
总 之 ， 如 果 引 用 的 是 一 个 资源 文件 ， 那 么 “R” 后 面 是 类 别 ; 如 果 引 用 的 是 资源 文件 中 的 一 个 
元 素 〈 比 如 Layout 资源 中 的 一 个 控件 ) ， 那 么 “R” 后 面 就 是 “id”。 


7.1.2 3& Activity 


所 有 Activity 的 祖先 都 是 类 Activity. MainActivity 类 的 父 类 是 AppCompatActivity， 也 是 
从 Activity 类 派生 的 。 它 对 老 版 本 Android 系统 的 兼容 性 好 , 所 以 推荐 此 类 为 我 们 定义 Activity 
的 父 类 ， 这 样 App 才 有 可 能 运行 在 低 版 本 的 Android 系统 中 ， 才 能 在 更 多 的 手机 中 运行 。 


7.4.8 四 大 组 件 


Android 系统 中 的 四 大 组 件 分 别 是 : Activity、BroardcastReceiver (广播 接收 者 ) Service 
(服务 ) 和 ContentProvider (内 容 提 供 者 ) 。 

这 四 大 组 件 后 面 都 会 介绍 , 现在 只 需要 记 住 四 大 组 件 有 个 明显 的 特征 即 可 , 也 就 是 不 能 通 
过 new 直接 实例 化 ， 而 必须 由 Android 系统 创建 ， 前 提 是 能 让 系统 找到 这 四 大 组 件 的 类 定义 。 
如 果 要 自 定 义 一 个 四 大 组 件 的 类 ， 就 必须 在 App 的 Manifest (名单 ) 文件 中 声明 。 这 样 系统 
才能 找到 这 个 类 ， 才 能 实例 化 它 。 我 们 的 AndriodManifestxml 文件 的 内 容 如 图 7-2 所 示 。 被 
红 框 框 起 来 的 就 是 App 中 当前 唯一 的 Activity 声明 。 属 性 “android:name” 的 值 “.MainActivity” 
是 Activity 的 类 名 ， 此 处 省 略 了 包 名 ， 但 是 前 面 的 “.” 不 能 省 略 。 有 了 这 个 类 名 ， 系 统 就 可 
以 通过 反射 的 方式 把 Activity 创建 出 来 了 。 至 于 “<intent-filter>” 元 素 的 作用 ， 后 面 会 讲 到 。 
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如 果 只 创建 了 Activity 的 类 ， 而 没有 在 Manifest 文件 中 声明 它 ， 那 么 Activity 是 不 能 启 
动 的 。 


了 .2 在 代码 中 操作 控件 


运行 App， 看 到 的 将 是 登录 界面 。 我 们 正好 可 以 通过 登录 功能 来 演示 代码 如 何 操作 控件 。 
比如 要 验证 是 否 能 登录 , 就 必须 获取 用 户 输入 的 用 户 名 和 密码 。 什么 时 候 获 取 呢 ? 登录 这 个 动 
作 是 在 用 户 单 击 了 “登录 ”按钮 之 后 执行 的 ， 所 以 需要 响应 按钮 的 单 击 事件 ， 在 响应 事件 的 回 
调 方法 中 获取 用 户 名 和 密码 。 

无 论 怎样 ， 只 有 先 获取 控件 才能 操作 。 


7.2.1 获取 控件 
我 们 为 控件 指定 的 ID 如 图 7-3 所 示 。 


ID editTextName 
layout width fratcn_cons 
layout heigh — 41dp 


FirstCotlinApp 
16 v 


© 
8 ov b 0v 


图 7-3 
在 代码 中 就 是 通过 这 个 ID 来 获得 控件 对 象 的 。 获 得 用 户 名 这 个 EditText 控件 的 代码 为 : 


val editTextName:EditText = findViewById(R.id.editTextName); 


获取 控件 用 的 是 Activity 的 findViewById0 方 法 ， 其 参数 是 控件 的 ID. 

注意 ! 上 面 是 传统 的 方式 ， 使 用 Java 时 必须 这 样 做 。 使 用 Kotlin 时 ， 可 以 选择 这 样 做 ， 
也 可 以 不 这 样 做 一 一 把 这 句 省 掉 , 直接 使 用 与 控件 id 同名 的 成 员 变 量 ( 成 员 变 量 也 叫 作 字段 ， 
变量 名 就 叫 “editTextName”) 。 也 就 是 说 查找 控件 的 代码 ，Activity 类 已 经 帮 我 们 执行 了 ， 
并 且 为 此 控件 在 类 中 建立 了 字段 ， 这 是 使 用 Kotlin 带 来 的 一 个 好 处 。 

得 到 了 这 个 控件 , 就 可 以 对 它 进行 操作 了 , 比如 可 以 把 在 属性 编辑 器 中 设置 属性 改 为 用 代 
码 来 设置 ， 这 样 也 让 我 们 体会 到 一 切 的 本 质 还 是 代码 。 

首先 在 属性 编辑 器 中 把 用 户 名 输入 控件 的 hint 属性 清空 (操作 的 文件 是 activity main.xml)， 
于 是 就 看 不 到 提示 了 〔 见 图 7-4)。 
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textPersonName. 


editTextStyle 


图 7-4 
然后 写 入 代码 : 


this.editTextName .setHint (" 请 输入 用 户 名 ") ; 


我 们 一 般 希 望 Activity 一 显示 出 来 就 能 看 到 EditText 控件 中 的 hint， 所 以 应 在 界面 显示 之 
前 设置 ， 当 然 控件 也 必须 已 被 创建 ， 所 以 应 放 在 控件 创建 之 后 、 显 示 之 前 ， 最 合适 的 位 置 就 是 
在 Activity 的 onCreate0 方 法 中 setContentView0 语 名 之 后 。 现 在 Activity 的 onCreate 方法 如 下 : 
class MainActivity : AppCompatActivity() ( 
override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 
setContentView(R.layout.activity main) 


LLIUBEREREBEHIGTSTE T 
//val editTextName:EditText = findViewById(R.id.editTextName); 


// BESTES nint E 
this.editTextName.setHint ("请 输入 用 户 名 ") ; 


} 


注意 ， 此 时 可 能 会 有 语法 错误 ，Android Studio 会 以 红色 或 红色 波浪 线 标 出 错误 的 地 方 ， 
通 不 过 编译 。editTextName 被 标 成 红色 ， 是 因为 找 不 到 定义 这 个 变量 的 地 方 。 如 何 解决 这 个 错 
误 呢 ? 导入 变量 所 在 的 类 (Android Studio 自动 产生 , 叫 什么 名 字 不 必 太 在 意 , 可 以 让 Android 
Studio 帮助 导入 ) 。 在 出 错 的 地 方 点 一 下 鼠标 , 然后 按 “Alt+Enter” 快 捷 键 , 会 在 MainActivity.kt 
的 顶部 出 现下 面 的 语句 ， 问 题解 决 : 


import kotlinx.android.synthetic.main.activity main.* 
有 时 Android Studio 无 法 确定 应 该 如 何 解决 一 个 错误 ， 它 此 时 会 显示 一 个 菜单 ， 里 面 列 出 
了 多 个 解决 方案 ， 如 图 7-5 所 示 。 


因为 多 个 文件 中 都 出 现 了 editTextName， 所 以 需要 我 们 来 选 , 选择 的 时 候 要 看 仔细 。 运 行 
App， 效 果 如 图 7-6 所 示 。 


kotlinx android.synthetic.main.content register.editTextName » 


kotlinx android.synthetic.main fragment login.editTextName 上 


7-5 图 7-6 
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在 实际 运行 中 ,用 户 名 输入 控件 中 依然 有 提示 , 说 明代 码 起 作用 了 ! 在 代码 中 设置 提示 的 
方法 是 setHint(), 符合 Java 中 getter 和 setter 的 命名 规则 。 setHint 对 应 的 属性 名 就 是 “hint”， 
所 以 在 界面 设计 器 中 就 是 设置 “hint” 属 性 。 


7.2.2 ”响应 View 的 事件 


App 提供 了 图 形 界面 ， 我 们 通过 界面 中 的 控件 与 App 交互 。 比 如 在 登录 页 面 中 ， 通 过 单 
击 “ 登 录 ” 按 钮 登录 ， 所 以 登录 代码 是 在 单 击 登 录 按钮 之 后 执行 的 。 那么 如 何 响应 按钮 的 单 击 
事件 呢 ? 添加 侦 听 器 ! 

侦 听 器 是 一 个 接口 或 Lambda。 侦 听 器 就 是 用 来 包装 响应 代码 的 。 如 果 设 置 接口 的 实例 ， 
那么 我 们 的 主要 工作 就 是 实现 接口 的 唯一 方法 。 下 面 是 一 个 侦 听 器 接口 的 代码 : 

public interface OnClickListener ( 

void onClick(View varl); 

) 

要 实现 这 个 接口 ,才能 创建 侦 听 器 的 实例 。 要 响应 哪个 控件 的 事件 ， 就 把 侦 听 器 实例 设置 
给 哪个 控件 。 注 意 ， 不 同 的 事件 对 应 的 侦 听 器 接口 不 一 样 ， 比 如 上 面 就 是 响应 单 击 事件 的 侦 听 
器 接口 ， 而 响应 滚动 事件 的 侦 听 器 接口 为 AbsListView.OnScrollListener。 

以 Lambda 为 参数 时 ， 响 应 单 击 “ 登 录 ” 按 钮 的 代码 如 下 : 

LIBE ER” BUDAH 

this.buttonLogin.setOnClickListener { 


1/12 B Ti SLE ELE RO POS 
) 


可 以 看 到 ， 创 建 Lambda 的 写法 省 略 到 了 极致 。 

以 侦 听 器 对 象 为 参数 时 ， 响 应 单 击 “ 登 录 ” 按 钮 的 代码 如 下 : 

1/0 BER” BUKAE, UHN ENRE 

this.buttonLogin.setOnClickListener(View.OnClickListener { 

1/1 B Ti T EERIE 

n 

在 创建 侦 听 器 对 象 时 ， 依 然 使 用 了 Lambda。 实 际 上 这 两 种 方式 没有 什么 不 同 ， 核 心 都 是 
实现 一 个 方法 。 我 们 选用 第 一 种 方式 ， 省 事 。 


7.2.3 ”添加 依赖 库 
有 多 种 方式 可 以 显示 提示 ， 较 好 的 方式 是 用 类 pome 


D N E > Ð build.gradle (Project: FirstCotlinA| 
Snackbar。 要 使 用 这 个 类 , 就 需要 添加 依赖 库 “design”， DL i dde ii e T 
否则 不 能 被 导入 。 fgradle-wrapper.properties (Grade Version) 
{l proguard-rules pro (ProGuard Rules for app) 


项 目 所 依赖 的 库 在 Gradle ff] Module 脚本 文件 中 定义 ， 
如 图 7-7 所 示 。 在 此 文件 中 的 dependencies (依赖 ) 块 列 
出 了 App 依赖 的 库 : 


Hygradle properties ( 
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dependencies ( 

implementation fileTree(dir: 'libs', include: ['*.jar']) 

implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin version" 

implementation 'com.android.support:appcompat-v7:28.0.0" 

implementation 'com.android.support.constraint:constraint-layout:1.1.3' 

testImplementation 'junit:junit:4.12' 

androidTestImplementation 'com.android.support.test:runner:1.0.2' 

androidTestImplementation 'com.android.support.test.espresso: 
espresso-core:3.0.2' 


} 
这 都 是 Gradle 的 语法 ， 稍 微 解释 一 下 : 


implementation fileTree(dir: 'libs', include: ['*.jar']) 


这 一 句 定义 默认 库 文件 夹 为 “libs”, 如 果 把 jar 包 扔 到 工程 的 libs 文件 夹 下 就 会 被 自动 找到 ， 
如 果 工 程 根 路 径 下 没有 libs 目录 ， 就 自己 建立 一 个 ， 但 一 般 不 这 样 做 ， 因 为 有 更 方便 的 做 法 。 


implementation 'com.android.support:appcompat-v7:28.0.0"' 


这 一 句 定义 一 个 依赖 库 ， 以 “:” 分 成 了 3 部 分 : “com.android.support” 是 库 的 groupid, 
“appcompat-v7” 是 库 名 ，“28.0.0” 是 库 的 版 本 。 注 意 ， 项 目 中 的 版 本 号 可 能 不 一 样 。 
testImplementation 和 androidTestImplementation 表示 在 单元 测试 代码 中 所 用 到 的 库 。 
我 们 要 添加 design Æ, 可 以 这 样 写 :“implementation 'com.android.support:design:28.0.0'”。 
放 在 这 个 代码 块 内 就 行 ， 顺 序 无 所 谓 。 注 意 ， 必 须 与 已 存在 的 同属 于 “com.android.support” 
组 的 其 他 库 的 版 本 相同 才 行 ， 否 则 编译 通 不 过 。 
还 可 以 通过 模块 设置 对 话 框 添加 依赖 库 ， 方 法 是 : 
(1) 在 工具 栏 上 找到 “Project Structure (工程 结构 ) ” 
按钮 ( 见 图 7-8〉 并 单 击 之 。 m 
(2) 选择 菜单 项 “Open Module Settings (打开 模块 设置 ) ”， 出 现 模块 设置 窗口 ， 选 中 
ERED “Dependencies” 〈 见 图 7-9) 。 


Project Structure (Ctrl+Alt+Shift+S) | 


+ 一 Properties | Signing | Flavors | Build Types | Dependencies 
SOK Location. MÀ à 
Project (che [jr] diri] erm 
Developer Ser.. Mm orgjetbrains kotlin:kotlin-stdlib-jdk7:$kotlin_version Implementation ~ 
pur m com.android.supportappcompat.v7:28.0.0 Implementation ~ 
Authentication 

四 eom android support constraintconstraint-ayout:1.1.3 implementation 


Notifications 
M m junitjunit4.12 Unit Test implem.: 


m comandroid support testrunner1.02 Test implementa. 
M com android support test espressorespresso-core:302 Testimplementa. 


7-9 


94 


第 7 章 操作 控件 


(3) 在 “Dependencies〈 依 赖 ) ”页面 中 添加 依赖 项 。 单 击 右 上 角 的 绿色 “+” 图 标 ， 出 
现 菜单 〈 见 图 7-10) 。 


Scope 
Implementation ~ 


1 Library dependency 
Implementation ~ ifi 2 Jar dependency 


Implementation ~ Module dependency 


图 7-10 
(4) 选择 “Library dependency〈 库 依赖 )”， 出 现 如 图 7-11 所 示 的 窗口 。 


com.android.support.design:28.0.0 & 
Enter terms for Maven Central search, or fully-qualified coordinates (e.g. comgroglecode gsongson224 
com.android.supportsupport-annotations (com.android.support:support-annotations:28.0.0) 
com.android.support:support-v4 (com.android.support:support-v4:28.0.0) 

com.android support support-v13 (com android support:support-v13:28.0.0) 
com.android.supportappcompat-v7 (com.android.supportappcompat-v7:28.0.0) 

com.android support support-vector-drawable (com.android.supportsupport-vector-drawable:28.0.0] 


H 7-11 


选择 “com.android.support:design” 这 一 条 。 如果 看 不 到 , 可 以 在 搜索 栏 中 搜索 “design”。 
选中 后 , 单 击 “OK” 按 钮 , Gradle 就 会 自动 添加 这 个 库 。 注意, 版 本 号 有 时 会 与 已 存在 的 support 
库 的 其 他 包 版 本 不 一 致 ， 要 手动 改 一 下 。 

一 个 库 要 能 被 Android Studio 正确 使 用 ， 需 要 经 过 一 定 的 处 理 ， 可 以 看 一 下 在 Android 
Studio 下 面 的 状态 栏 右边 是 否 有 进度 条 〈 见 图 7-12) ， 如 果 有 就 等 一 会 儿 ， 直 到 进度 条 消失 才 
能 继续 下 一 步 工作 。 


[E 二 TODO E iE v Version Control IB Terminal 
国 Gradle sync star. „è Gradle: Configure project :app 


图 7-12 


7.2.4 显示 提示 
使 用 Snackbar 显示 提示 信息 ， 可 以 在 Lambda 中 加 入 如 下 代码 : 


//Él& Snackbar X/ $t 
val snackbar = Snackbar.make (v, "你 点 我 干 喻 ?", Snackbar .LENGTH_LONG) ; 
JL BRER 


snackbar.show(); 


第 一 行 语句 创建 一 个 Snackbar 对 象 ， 第 二 行 语 句 显示 提示 。 创 建 对 象 调用 了 Snackbar 类 
的 静态 方法 make0。 这 个 方法 需要 3 个 参数 。 第 一 个 是 View，Snackbar 根据 它 获 取 一 个 合 ; 
的 父 控件 来 放置 自己 。 我 们 传 入 了 “it”。 因 为 “it” 是 Lambda 的 唯一 参数 ， 所 以 可 以 省 略 ， 
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在 Lambda 内 部 就 以 “it” 访 问 此 参数 。 它 就 是 被 单 击 的 那个 控件 。 第 二 个 参数 是 要 提示 的 文 
本 。 第 三 个 是 一 个 常量 ， 表 示 文 本 多 长 时 间 后 提示 自动 消失 ， 有 3 个 值 (定义 在 Snackbar 类 
中 的 常量 ) 可 选 。 

注意 ， 在 添加 Design 库 后 ，SnakeBar 类 还 需要 导入 ， 因 为 会 看 到 如 图 7-13 所 示 的 提示 。 


// Él é'snackbar 5 & 
val snackbar = Snackbar .make(v, "ki R FIE?” ,Snackbar. LENGTH LONG); 


B 7-13 


红色 表示 语法 有 错误 〈 找 不 到 “SnakeBar” 这 个 标识 符 的 定义 ) ， 编 译 通 不 过 。 类 名 、 方 
法 名 、 变 量 名 等 统称 为 标识 符 ， 根 据 Java 的 命名 习惯 ， 开 头 字母 大 写 的 是 类 或 接口 ， 所 以 这 
里 显示 类 定义 找 不 到 。 其 原因 可 能 是 类 真 的 没有 定义 , 也 可 能 是 已 定义 了 而 没有 导入 。 这 里 就 
是 由 于 没有 导入 造成 的 ， 解 决 方法 是 Import 这 个 类 。 

按 “AltrEnter” 快 捷 键 ， 然 后 会 显示 一 个 菜单 〈 见 图 7-14) ， 里 面 是 各 种 建议 的 解决 方 
案 ， 选 择 一 个 合适 的 即 可 。 

Snackbar .make(v , " f HIR FR?" ,snackbar.LENGTH LONG); 


Imports. 
4P com.example:niu.firstcotlinapp.R.styleable.Syfckbar » 


3f android.support.design.R.styleable.Snackbar > 


H 7-14 


我 们 选择 第 二 项 。 第 一 项 和 第 三 项 都 是 类 “R” 里 的 类 ， 是 用 于 包含 常量 的 ， 不 是 真正 的 
SnackBar 类 ; 第 二 项 是 “widget” 包 里 的 类 ，widget 一 般 用 于 表示 界面 中 的 组 件 。 只 有 第 二 项 
是 ， 这 是 需要 靠 经 验 的。 选择 第 二 项 后 在 MainActivity.kt 的 顶部 导入 了 类 SnackBar。 

若 想 看 Snackbar 类 的 定义 ， 可 按 Ctrl 键 ， 然 后 在 Snackbar 类 名 出 现 的 地 方 单 击 ， 便 可 打 
开 SnackBar 的 源码 文件 ， 如 图 7-15 所 示 。 


public final class Snackbar extends BaseTransientRottomBar«Snackbar» { 
private final AccessibilityManager accessibilityManager; 
private boolean hasaction; 
public static final int LENGTH INDEFINITE - -2; 
public static final int LENGTH SHORT - -1; 
public static final int LENGTH LONG = 0; 
private static final int[] SNACKBAR BUTTON STYLE ATTR; 
Quullable 
private Basecallback«snackbar» callback; 


private Snackbar(ViewGroup parent, View content, ContentViewCallback| 
super(parent, content, contentViewcallback); 
this.accessibilityManager = (AccessibilityManager)parent.getcont 


3 


745 
其 中 “LENGTH INDEFINITE" Ak ^ Hr XH: "LENGTH SHORT” 表 示 短 时 
间 内 就 关闭 提示 ; "LENGTH LONG” 表 示 比 较 长 的 时 间 之 后 才 关 闭 提示 。 这 个 时 间 的 长 短 
可 以 自己 体会 一 下 。 
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7.2.55 ”完成 收工 
最 终 ， 文 件 的 代码 如 下 : 


import android.os.Bundle 
import android.support.design.widget.Snackbar 
import android.support.v7.app.AppCompatActivity 


import kotlinx.android.synthetic.main.activity main.* 


class MainActivity : AppCompatActivity() { 
override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 


setContentView(R.layout.activity main) 


LLIBEREEEERHIGESTE T 
//val editTextName:EditText = findViewById(R.id.editTextName); 


//L BESTES nint ME 
this.editTextName.setHint (" 请 输入 用 户 名 ") ; 


/LLIBÓBE BER” KUHATE, U Lambda 29236 


this.buttonLogin.setOnClickListener ( 


// Él& Snackbar X/ $t 
val snackbar = Snackbar.make (v, "ARTF?" , Snackbar .LENGTH_LONG) ; 
// BERET 


snackbar. show (); 


} 
运行 App， 然 后 单 击 “ 登 录 ” 按 钮 ， 随 即 出 现 如 图 7-16 所 示 的 效果 。 


图 7-16 
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Activity 导航 就 是 页 面 之 间 的 切换 。 

我 们 现在 有 了 一 个 登录 页 面 , 在 这 个 页 面 上 有 “注册 ”按钮 。 一 般 的 设计 是 单 击 “ 注 册 ” 
按钮 进入 注册 页 面 , 用 户 在 注册 页 面 注册 成 功 后 ,返回 登录 页 面 进行 登录 ， 此 时 会 把 刚 注 册 的 
用 户 名 和 密码 填 到 登录 页 面相 应 的 输入 框 中 。 下 面 我 们 就 把 这 个 典型 的 过 程 实现 一 下 , 同时 演 
示 如 何 实现 页 面 导航 。 


创建 注册 页 面 


创建 注册 页 面 需要 添加 一 个 Activity， 过 程 如 下 : 
首先 ， 在 项 目的 “App” 目 录 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “new 一 Activity 一 Basic 
Activity” 命 令 ， 如 图 8-1 所 示 。 


V Android ~ *or class MainActivity : AppCompatactivity() 轩 


astanceStat 
: Er at.activity main) 
iin & Kotlin File: 
$, Android Resource File 
gra 
ig! pii M UE Android Resource Directory 
prd  CopyPat Ctrl«Shift«C 1 
P 了 curly P Sample Data Directory 
ui B Paste 一 8 File & Gallery... 
D set i ri wWfts il C =. 
Find in Path... CuhbShifGF 3 scratchFile  Ctri+Alt+Shift+insert | Android TV Activity 
loc — Replace in Path. P: 
ackage 
Analyze > 
$ C++ Class 
Behan ? & C/C++ Source File 
Add to Favorites ? Æ C/C++ Header File Blank Wear AcWvity 


Show Image Thumbnails b image Asset = Bottom Navigallon Activity 
& Vector Asset Emmy Aay 

Fragment + ViewModel 
= Fullscreen Activity 
77 Login Activity 
= Master/Detsil How 


Reformat Code 


Optimize Imports. '* Kotlin Script 


Singleton 
Gradle Kotlin DSL Build Script. 
Gradle Kotlin DSL Settiggs 


Show in Explorer. 
fi] Open in terminal 


Local History 
Sit > 
£5 Synchronize 'app' 


77 Navigation Drawer Activity 


Edit File Templates.. = scrolling activity 


AIDL » 


* 


Settings Activity 
Tabbed Activity 


图 8-1 
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在 创建 App 时 ， 我 们 也 创建 了 一 个 Activity， 当 时 选择 的 模板 是 “Empty Activity”， 这 次 
选择 “Basic Activity”。 出 现 “Create Activity” 对 话 框 〈 见 图 8-2) ， 在 “Activity Name" ^£ 
段 中 输入 “RegisterActivity”， 其 余 项 不 动 ， 单 击 “Finish” 按 钮 。 


Creates a new basic activity 
with an app bar. 


Activity Name: RegisterActivity 


Layout Name: activity register 


Title: RegisterActivity 


C Launcher Activity 


[Use a Fragment 


Android Studio 会 创建 以 下 文件 : 

* java 组 下 的 RegisterActivity 类 文件 。 

e res/layout 组 下 的 activity register.xml 和 content register.xml 文件 。 
在 Manifest 文件 中 增加 了 RegisterActivity 的 声明 : 


«activity 
android:name-".RegisterActivity" 
android: label="@string/ti tle_activity_register" 
android:theme-"8style/AppTheme.NoActionBar"»c/activity^ 


此 时 虽然 创建 了 注册 Activity, 但 是 运行 时 并 不 能 看 到 它 , 因为 我 们 需 


写 代 码 将 它 启动 。 


include layout 资源 文件 > Ba drawable 
ta layout 

由 于 这 次 选择 的 Activity 模板 是 Basic Activity， 因 此 一 个 T m 

Activity 对 应 两 个 layout 文件 〈 见 图 8-3) 。 sl content registerxml 
aj frame test laycutxml 

它们 之 间 是 include 关系 ，activity registerxml 中 包含 了 E 
content register.xml. TE activity register.xml 的 源码 中 ， 有 这 么 一 条 图 8-3 
语句 : 


<include layout="@layout/content register" /> 

其 实 它们 最 终 还 是 形成 一 个 文件 ， 只 是 通过 include 的 方式 把 内 容 分 散 到 不 同 的 文件 中 ， 
易于 维护 。 

activity_register.xml 是 总 文件 ， 定 义 了 内 容 区 之 外 的 组 件 ， 比 如 AppBar 和 
FloatingActionButton 〈 浮 动 动作 按钮 ) 。content register.xml 定义 了 内 容 。 


要 编辑 内 容 的 话 ， 必 须 打 开 content register. xml， 而 不 是 activity register.xml. 
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2.7 启动 注册 页 面 


新 的 页 面 已 创建 ， 要 显示 的 话 就 得 启动 Activity。 要 启动 新 的 Activity， 需 要 调用 当前 
Activity 的 方法 startActivity0, 用 参数 Intent 来 指明 要 启动 哪个 Activity。 启 动 新 RegisterActivity 
的 代码 放 在 哪里 呢 ? 我 们 应 该 在 单 击 注册 按钮 时 才 启 动 注册 界面 ,所 以 放 在 啊 应 注册 按钮 单 击 
事件 的 方法 中 : 

S/E, AMAR 


this.buttonRegister.setOnClickListener( 


//Él& Intent HR 

val intent = Intent(thisG8MainActivity, RegisterActivity::class.java) 
// H3] Activity 

startActivity (intent) eripe 


) 

这 段 代 码 应 放 在 MainActivity 类 的 onCreate 77 ih 

注意 ，Activity 不 允许 直接 调用 构造 方法 创建 实例 ， 只 能 请 求 
系统 帮 我 们 创建 。 在 Intent 的 构造 方法 中 通过 在 第 二 个 参数 传 入 
Activity 的 类 对 象 (RegisterActivity::classjjava) ， 从 而 指明 要 启动 
哪个 Activity。Intent 构造 方法 的 第 一 个 参数 是 一 个 Context 对 象 ， 
表示 代码 执行 所 在 的 环境 。Activity 就 是 从 Context 派生 的 ， 所 以 
此 处 传 入 了 当前 Activity 的 实例 CMainActivity) o 

运行 起 来 , 单 击 “ 注 册 ” 按 钮 , 出 现 了 注册 界面 ( 见 图 8-4) 。 

如 何 回 到 上 一 页 面 呢 ? 单 击 返回 键 〈 箭 头 指 示 处 ) 。 
8.2.44 修改 页 面 标题 图 8-4 

不 论 是 MainActivity 还 是 RegisterActivity， 其 AppBar 上 的 标题 都 不 够 人 性 化 ， 比 如 
RegisterActivity 的 标题 是 “RegisterActivity”。 这 些 字 符 串 都 放 在 资源 文件 


res/values/strings.xml 中 ， 但 直接 去 这 个 文件 中 找 是 比较 麻烦 的 ， 因 为 我 们 不 能 确定 哪个 String 
资源 被 谁 使 用 ， 所 以 应 该 先 看 一 下 Activity 的 标题 使 用 的 是 哪个 String 资源 。 打 开 Manifest 


teractivity" 
z"RegisterActivity" 


图 8-5 8-6 


可 以 看 到 activity 元 素 的 属性 “android:label” 指 定 了 Activity 的 标题 。application 也 有 这 
个 属性 ， 指 定 的 是 App 的 名 字 ， 即 显示 在 桌面 上 的 App 名 字 ， 如 图 8-7 所 示 。 
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按 住 Ctrl &, TE activity 的 android:label 属性 值 上 点 一 下 鼠标 左 键 ， 就 会 打开 string.xml 
文件 ， 并 显示 字符 串 资源 “title_activity register”， 内 容 如 下 : 


«resources» 


«string name-"app name"-FirstCotlinAppc/string^ 
«string name-"title activity register"^RegisterActivity«/string^ 
</resources> 
把 此 字符 串 资 源 的 值 改 为 “注册 ”， 并 把 MainActivity 的 标题 改 为 “登录 ”， 但 是 
MainAcitivity 的 声明 中 没有 “android:label” 属 性 ， 没 关系 ， 添 加 一 个 即 可 〈 见 图 8-8) 。 


手机 助手 


8-7 图 8-8 


为 android:label 属性 设置 字符 串 资源 title activity login， 但 是 这 里 显示 红色 ， 因 为 这 个 字 
符 串 资 源 并 没有 定义 ， 我 们 既 可 以 手动 去 string.xml 中 添加 ， 也 可 以 借助 IDE 创建 。 借 助 IDE 
的 方式 是 : 单 击 左边 的 红色 灯泡 ， 或 者 把 光标 放 到 红色 字符 之 间 ， 然 后 按 下 Alt+Enter 键 ， 此 
时 出 现 菜 单 〈 见 图 8-9) ， 让 我 们 选择 如 何 解 决 此 问题 。 

选择 第 一 个 菜单 项 “ Create string value resource 


"tile activity login' (创建 String 值 资 源 ) ”， 出 现 资源 创 Resource lue; g tst 
建 对 话 框 〈 见 图 8-100 。 - 


Create the resource in directories: 


H values 


* Create string value resource 'title activity login 


È Provide feedback on this warning 


X Suppress: Add toolsignore-"GoogleApplndexingWarning" attribute 


3 Inject language or reference. » 


图 8-9 图 8-10 
在 Resource value 文本 框 中 输入 “登录 ” 即 可 ， 其 余 选项 不 动 ， 单 击 OK 按钮 。 可 以 看 到 
红色 提示 信息 消失 ， 字 符 串 资源 被 创建 。 可 以 去 string.xml 文件 中 查看 是 否 多 了 新 的 字符 串 资 
Y "title activity login“。 现 在 登录 页 面 的 标题 如 图 8-11 所 示 ， 同 时 注册 页 面 的 标题 也 变 了 。 


登录 


8-11 
8.2.2 MainActivity 源码 
MainActivity 的 源码 如 下 : 
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class MainActivity : AppCompatActivity() ( 
override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 
setContentView(R.layout.activity main) 


LIUBEREEURIGIETE TT 


//val editTextName:EditText — findViewById(R.id.editTextName); 


// REMH nint AE 
this.editTextName.setHint (" 请 输入 用 户 名 ") ; 


1/10 BR” III do EI, DE Lambda 29236 


this.buttonLogin.setOnClickListener ( 


//Él& Snackbar X f 
val snackbar = Snackbar.make (it, "RART?" , Snackbar .LENGTH_LONG) ; 
// BRIER 


snackbar.show(); 


) 
V1 "EB ARE, EA GEB 


this.buttonRegister.setOnClickListener( 
//Él& Intent HR 
val intent = Intent(thisGMainActivity, RegisterActivity:: 
class.java) 
// H8 Activity 
startActivity (intent) 


8.3 设计 注册 页 面 


注册 页 面 光 秃 秃 的 ， 我 们 放 一 些 控件 上 去 ， 设 计 一 下 。 用 户 注册 时 ， 可 以 输入 用 户 名 、 密 
码 、Email、 电 话 、 性 别 、 住 址 。 最 终 界面 以 及 控件 树 结构 如 图 8-12 所 示 。 


Component Tree. 


m ScrollView 
v 忆 ConstraintLayout 
2 ediTextName. 
a edirTextPassword Plan Text 
A» editTextPassword2 Ps 
A edirTextEmail i-a 
A editTextPhone: 


 radicGroup: 
Q radicale = 
© radiofemale 
a edirTemaddress plain re 
I burtonok “OF 
I buttoncancel- “cance: 


bhbhbhRhb bbbbhbh 


图 8-12 
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layout 资源 文件 源码 (content registerxml) 如 下 : 


<?xml version-"1.0" encoding="utf-8"?> 

<ScrollView 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
app:layout behavior-"6s tring/ appbar scrolling view behavior" 
tools:context-".RegisterActivity" 
tools:showIn-"8layout/ac tivity register"^ 


«android.support.constraint.ConstraintLayout 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:layout gravity-"center vertical"^ 


«EditText 
android:id-"G(4id/editTextName" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:layout marginEnd-"8dp" 
android:ems-"10" 
android:hint=" 用 户 名 " 
android:inputType-"textPersonName" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toTopOf-"parent" /» 


X«EditText 
android:id-"Gid/editTextPassword" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:layout marginEnd-"8dp" 
android:ems-"10" 
android:hint=" 密 码 " 
android:inputType-"textPassword" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"G-id/editTextName" /> 


X«EditText 
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android:id="@+id/editTextPassword2" 
android:layout_width="0dp" 
android:layout_height="wrap_content" 
android:layout_marginStart="8dp" 
android:layout_marginTop="8dp" 

8dp" 


android:layout_marginEnd= 
android:ems="10" 
android:hint=" 密 码 确认 " 
android:inputType-"textPassword" 

app:layout constraintEnd toEndOf-"parent" 

app:layout constraintStart toStartOf-"parent" 

app:layout constraintTop toBottomOf="@ 4id/editTextPassword" /> 


«EditText 
android:id-"(*id/editTextEmail" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:layout marginEnd- 
android:ems-"10" 
android:hint-"Email" 
android:inputType-"textEmailAddress" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf- G4id/editTextPassword2" /> 


«EditText 
android:id-"G(id/editTextPhone" 
android:layout width-"O0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:layout marginEnd-"8dp" 
android:ems-"10" 
android:hint-"Hiiá" 
android:inputType-"phone" 


app:layout constraintEnd toEndOf-"parent" 


app:layout constraintStart toStartO parent" 


G*id/editTextEmail" /> 


app:layout constraintTop toBottomof. 


«RadioGroup 
android:id="@+id/radioGroup" 
android:layout width="0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginEnd-"8dp" 
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android:checkedButton="@+id/radioMale" 
android:orientation="horizontal" 
app:layout constraintEnd toEndOf-"parent" 


app:layout constraintStart toStartO: parent" 


app:layout constraintTop toBottomOf="@ 4id/editTextPhone"-^ 


«RadioButton 
android:id-"8-id/radioMale" 
android:layout width: 
android:layout heigh 


atch parent" 


"wrap content" 


android:layout weight="1" 
android:text- 

«RadioButton 
android:id-"G*id/radioFemale" 


android:layout width-"match parent" 
android:layout height-"wrap content" 
android:layout weight-"1" 
android:text-" X" /> 

«/RadioGroup» 


X«EditText 
android:id-"G(id/editTextAddress" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:layout marginEnd-"8dp" 
android:ems-"10" 
android:hint=" 地 址 " 
android:inputType-"textPersonName" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"8-id/radioGroup" /> 


«Button 
android:id-"Gid/buttonOk" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
dp" 
android:layout_marginTop="8dp" 
android: text="0K" 


android:layout marginStar 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"(-id/editTextAddress" /> 


«Button 
android:id-"8id/buttonCancel" 


105 


Android 10 Kotlin 编程 通俗 演义 


android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginTop-"8dp" 
android:layout marginEnd-"8dp" 
android:text-"Cancel" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintTop toBottomOf-"Gid/editTextAddress" /> 
«/android.support.constraint.ConstraintLayout^ 
«/ScrollView» 


办 ,A 响应 注册 按钮 进行 注册 


在 RegisterActivity 中 , 需 响应 OK 按钮 和 Cancel 按钮 单 击 Cancel 按钮 时 需 关闭 本 Activity 
返回 上 一 个 页 面 (MainActivity) 。 单 击 OK 按钮 时 ， 要 做 的 工作 就 多 一 些 了 ， 包 括 : 


e 取得 各 输入 框 中 的 数据 。 

e 注册 用 户 〈 现 在 还 做 不 了 ， 没 有 后 台 服 务 器 ) o 
e 设置 返回 数据 。 

e 关闭 本 Activity。 


Activity 要 关闭 自己 , 调用 方法 finishO 即 可 , 当前 Activity 关 闭 后 自然 回 到 前 一 个 Activity， 
即 启动 本 Activity 的 那个 Activity。Activity 如 果 想 把 一 些 数据 返回 给 启动 自己 的 那个 Activity， 
就 必须 设置 返回 数据 ， 才 能 在 关闭 时 把 数据 传递 给 启动 它 的 Activity， 设 置 返回 数据 的 方法 是 
setResult(). Cancel 按钮 的 响应 代码 如 下 : 
// KI Cancel AMAHAI 
this.buttonCancel.setOnClickListener( 
//ŽØRÁE 
this@RegisterActivity.finish() 
} 


finish Activity 的 (也 可 能 是 父 类 的 ) 实例 方法 ， 它 的 作用 是 关闭 当前 的 Activity. 
响应 OK 按钮 的 单 击 事件 才 是 重点 ， 代 码 如 下 : 
/ SE OK KREAM 


buttonOk.setOnClickListener( view-» 
LEGERE 
val name = editTextName.text.toString() 
val password = editTextPassword.text.toString() 
val email = editTextEmail.text.toString() 
val phone = editTextPhone.text.toString() 
val address - editTextAddress.text.toString() 


var sex = false //Í£Z/. AÍl]i true CRZ., false Ek, RUAK 


106 


第 8 章 Activity 导航 


LL BERUB VE FEED TP CAE IP ECERIO 1D 
val checkRadioId = radioGroup.checkedRadioButtonId 
// Alit ia S TÍOGEBIS EM ia, ME sex EX true 
if (checkRadioId -- R.id.radioMale) ( 

sex = true 


H 


//2ER. 
//TODO; fA E EA SEE EERE E 


//Bl& Intent HR, RREK, RIR ERAP EMET 
val intent = Intent () 

intent.putExtra ("name", name) 

intent.putExtra ("password", password) 


// REER, 3E INIBSSUE SDK HUE X IM BI, ERE Activity EMH 
[LSU BLA EUR BIETER Intent HR 
setResult(Activity.RESULT OK, intent) 


/LEBI E BEI Activity 
finish() 
) 
这 些 代码 应 放 在 哪里 呢 ? 我 们 希望 页 面 一 出 现 , 就 能 单 击 其 中 的 按钮 执行 业务 逻辑 , 所 以 
应 放 在 RegisterActivity 的 onCreate() 方 法 中 ， 注 意 必 须 在 setContentView() 2. J o 
TE Activity 之 间 传 递 数据 用 “Intent”， 而 不 论 是 正 向 传递 还 是 返回 。Intent 中 的 数据 以 
“key-value” 的 形式 存储 ,key 是 一 个 字符 串 ,value 是 值 , 值 的 类 型 必须 是 基本 类 型 (如 Int、 
Float 等 ) ， 也 可 以 是 字符 串 类 〈String) ， 但 其 他 的 类 不 行 。 
注意 ,其 中 的 radioGroup 内 部 包含 了 两 个 RadioButton， 某 一 时 刻 只 能 有 一 个 RadioButton 
被 选中 ， 那 么 如 何 判断 是 哪个 RadioButton 被 选中 了 呢 ? 
运行 一 下 ， 没 问题 ， 但 是 数据 没有 返回 。 要 想 返 回 数据 ， 在 启动 注册 Activity 时 使 用 
startActivityO 是 不 行 的， 那么 如 何 做 呢 ? 下 文 分 解 。 


号 .5 获取 页 面 返回 的 数据 


MainActivity 要 想 获取 RegiserActivity 返回 的 数据 ， 在 启动 RegiserActivity 时 必须 使 用 方 
法 startActivityForResult0 而 不 是 startActivity0。 打 开 MainActivity 类 ， 找 到 启动 注册 页 面 的 
地 方 : 

/LBLBZ "YER" PRI, AAMA 


this.buttonRegister.setOnClickListener( 


//Él& Intent X/ ft 
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) 


val intent = Intent(thisG8MainActivity, RegisterActivity::class.java) 
// Hl Activity 
startActivity (intent) 


将 startActivity(intent) 改 为 startActivityForResult(intent, 123). startActivityForResult()£ ^A 
重 载 的 版 本 ， 我 们 使 用 其 中 一 个 ， 要 求 有 两 个 参数 : 一 个 是 Intent 对 象 ， 一 个 是 请 求 码 。 请 求 
码 是 一 个 整数 ， 用 于 标志 是 哪个 Activity 返回 了 。 因 为 我 们 可 以 在 MainActivity 中 启动 不 同 的 
Activity， 如 果 要 取得 它们 返回 的 数据 ， 就 必须 区 分 是 谁 返回 了 ， 可 用 请 求 来 完成 。 

注册 页 面 返回 的 数据 并 不 能 主动 去 获取 ， 只 能 被 动 获取 , 因为 MainActivity 并 不 知道 注册 
页 面 什么 时 候 关 闭 ， 只 能 等 注册 页 面 通知 MainActivity。 这 里 不 能 设置 RegisterActivity 关闭 时 
的 侦 听 器 ， 因 为 没有 这 样 的 API， 而 是 需要 在 MainActivity 中 重 写 父 类 的 一 个 方法 : 


fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) 


第 一 个 参数 是 启动 Activity 时 传 入 的 请 求 码 ， 就 是 调用 startActivityForResult() fz A If 
“123”。 第 二 个 参数 是 被 启动 的 Activity 关闭 前 设置 的 结果 码 ， 就 是 RegisterActivity 中 下 面 
这 一 句 中 的 第 一 个 参数 。 第 三 个 参数 是 下 面 这 一 句 中 的 第 二 个 参数 : 

setResult(Activity.RESULT OK, intent) 

我 们 要 在 MainActivity 中 实现 onActivityResult() 方 法 ， 需 要 在 其 中 先 判断 是 哪个 Activity 
返回 的 ， 再 把 数据 取出 来 ， 然 后 用 日 志 输出 一 下 。 代 码 如 下 : 


override fun onActivityResult (requestCode: Int, resultCode: Int, data: Intent?) { 


) 
8.5.1 


在 运 


if (requestCode === 123) ( 
/ LÉBUBEEBRUDEEI T 
if (resultCode --- Activity.RESULT OK) ( 


/ /UBEZEB PP ITIEHEI 7, M data TRUE RHE 
val name - data?.getStringExtra ("name") 

val password - data?.getStringExtra ("password") 
VARAZZE — F 


Log.i("testLogin", "name = $name,password = $password") 
} 


11 BI — FACIBUS 


super.onActivityResult (requestCode, resultCode, data) 


避免 常量 重复 出 现 
行 代码 之 前 ， 先 优化 一 下 代码 ， 因 为 有 一 处 很 明显 需要 优化 : 启动 注册 Activity 时 的 


请 求 码 是 “123”, 这 个 常量 被 用 到 了 两 次 。 为 了 避免 出 错 , 我 们 应 把 它 定义 成 类 的 只 读 属性 ， 
而 且 由 于 此 变量 的 值 不 会 改变 , 也 就 没 必 要 让 它 在 不 同类 的 实例 中 各 保持 一 份 , 因此 把 它 置 为 
静态 ， 使 它 属于 类 而 不 是 类 的 实例 。 
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在 MainActivity 中 定义 一 个 常量 REGISTER_ REQUEST_CODE， 具 体 如 下 : 


class MainActivity : AppCompatActivity() ( 
/ILAKEEAERG, BER ATAUK I RRR 
/ HIDE BR T E? 
companion object( 
val REGISTER REQUEST CODE - 123 
) 


然后 ， 在 出 现 “123” 的 地 方 用 这 个 常量 来 代替 ， 在 MainActivity 中 为 : 
IERE, EA GEBERURT 


this.buttonRegister.setOnClickListener( 
//Él&& Intent XR 
val intent = Intent(thisG8MainActivity, RegisterActivity::class.java) 
// H3] Activity 
thisQMainActivity.startActivityForResult (intent, 
MainActivity.Companion.REGISTER REQUEST CODE) 
) 


还 有 这 里 : 
override fun onActivityResult (requestCode: Int, resultCode: Int, data: Intent?) { 
if (requestCode === Companion.REGISTER REQUEST CODE) { 


注意 , “Companion” 前 面 的 “MainActivity” 可 以 省 略 , 因为 代码 就 在 MainActivity 类 内 部 。 
同 理 ， 我 们 通过 Intent 传递 用 户 名 和 密码 时 ，key 的 名 字 “name” 和 “password” 等 字面 
量 也 被 多 次 使 用 , 所 以 也 有 必要 把 它们 设 成 静态 常量 。 于是, MainActivity 的 Companion Object 
变 为 : 
companion object( 
val REGISTER REQUEST CODE - 123 
val KEY NAME-"name" 


val KEY PASSWORD-"password" 
) 


MainActivity 中 获取 返回 数据 的 代码 变 为 : 


if (resultCode --- Activity.RESULT OK) ( 
11 IERM PRITE RDT, M data PIIDE IET. 
val name = data?.getStringExtra (Companion.KEY NAME) 
val password = data?.getStringExtra (Companion.KEY PASSWORD) 


然后 RegisterActivity 中 添加 返回 数据 的 代码 变 为 : 
//8l[& Intent HR, RREH, RIR ERAP EMEN 


val intent = Intent () 
intent.putExtra (MainActivity.Companion.KEY_NAME, name) 
intent.putExtra (MainActivity.Companion.KEY PASSWORD, password) 


109 


Android 10 Kotlin 编程 通俗 演义 


这 样 做 其 实 并 不 会 提高 程序 的 运行 效率 , 但 会 提高 代码 维护 的 效率 , 不 用 每 次 在 用 到 的 地 
方 都 输入 常量 。 


8.5.2 ”日志 输出 
我 们 使 用 了 Log 类 的 方法 来 输出 日 志 : 


Log.i("testLogin", "name = $name,password = $password") 


HEE Logcat 窗口 中 输出 〈 见 图 8-13) 。 这 些 日 志 总 是 一 大 堆 ， 并 有 不 同 的 颜色 ， 是 由 
所 连接 的 虚拟 机 或 真实 的 设备 中 输出 的 。 有 Android 系统 输出 的 ， 也 有 App 输出 的 。 颜 色 代 
表 级 别 可 以 在 标记 3 所 示 的 组 合 框 中 选择 级 别 。 从 高 到 低 分 别 为 Verbose, Debug, Info. Warn, 
Error、Assert。 并 不 是 选 哪个 级 别 就 只 显示 哪个 级 别 的 日 志 ， 而 是 显示 这 个 级 别 和 低 于 这 个 级 
别 的 日 志 ， 比 如 选 了 Info， 那 么 Info、Warmm、Error、Assert 级 别 的 日 志 都 会 输出 。 

标记 1 处 是 当前 连接 的 设备 ， 可 能 是 真 机 ， 也 可 能 是 虚拟 机 ， 反 正 日 志 就 是 它 输出 的 。 标 
记 2 处 是 当前 正在 调试 进程 ， 当 通过 Android Studio 启动 App 时 ， 这 里 就 显示 App 进程 。 标 
id 4 处 是 过 滤 字 符 串 , 如 果 没有 , 就 不 过 滤 ， 从 中 可 以 看 到 当前 显示 的 日 志 中 都 带 有 “network” 
字符 串 。 


Logcat 


AWE AT v] [Nodebuggabiddrocens v| |Vetike v. [Grnewox 4 | 


12-19 09:17:24.074 2534-2622/? I/PwCustMobileSignalControllerImpl: sub 


12-19 09:17:31.754 2534-2534/? D/Networkcontroller.Nobilesignalcontro: 
12-19 09:17:31.754 2534-2534/? D/NetworkController.MobileSignalContro!| 
12-19 09:17:31.764 2534-2622/? I/PwCustMobileSignalControllerImpl: sub 
12-19 09:17:37.764 2534-2534/? D/Networkcontroller.Nobilesignalcontro: 


ga 02718 09:17:37.764 2534-2534/? D/NetworkController.Mobi leSignalControl 
12-19x99:17:37.764 2534-2622/? 1/HwCustMobilesignalcontrollerImpl: sub 


TODO TE gigal V $VesionConto! I Terminal — l" Build 


图 8-13 


在 代码 中 ， 可 以 调用 Log 的 Log.v0. Log.d0. LogiQ. Log.wO. Log.eQ. Log.wtf() (wtf 
是 What a Terrible Failure 的 意思 ) 来 输出 不 同 级 别 的 日 志 。 这 六 个 方法 都 需要 两 个 参数 : 第 一 
个 参数 是 一 个 字符 串 ， 叫 作 tag〈 标 记 ) ， 就 是 所 输出 日 志 “:” 前 面 的 部 分 ， 第 二 个 参数 也 是 
字符 串 ， 就 是 “:” 后 面 的 内 容 。 

测试 一 下 ,运行 我 们 的 App， 进 入 注册 页 面 , 在 注册 页 面 的 用 户 名 和 密码 框 中 输入 名 字 和 
密码 ， 然 后 单 击 OK 按钮 ， 回 到 登录 页 面 ， 虽然 在 界面 上 看 不 到 变化 , 但 是 MainActivity 已 经 
取得 返回 的 数据 并 打印 出 来 了 。 可 以 在 监视 窗口 中 看 到 Log.i0 所 输出 的 日 志 ( 见 图 8-14) 。 


[S HUAWEIATH-TLOOH A v] comexampleniufiteod v [info ~ Qr testLogin 


12-19 21:07:58.994 18820-18820/com.example.niu.firstcotlinapp I/testLogin| name = userl,password = mmmm 


8-14 


把 所 输出 日 志 的 tag 作 为 过 滤 字 符 串 之 后 , 在 窗口 中 就 只 剩 下 了 我 们 输出 的 这 一 条 日 志 了 ， 
从 中 可 以 看 到 name 和 password 的 值 都 得 到 了 。 
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8.5.8 ”将 返回 的 数据 设置 到 控件 中 


我 们 要 做 的 还 没完 成 .我 们 还 要 把 注册 页 面 返回 的 用 户 名 和 密码 设置 到 登录 页 面 的 用 户 名 
和 密码 输入 框 中 。 此 段 代码 应 放 在 onActivityResult0) 方 法 中 ， 蔡 换 日 志 输 出 那 句 : 
if (resultCode --- Activity.RESULT OK) ( 
/ / WEERT PA TÉTE ERUIT T, M data TUE FIERE 
val name = data?.getStringExtra (Companion.KEY NAME) 
val password = data?.getStringExtra (Companion.KEY PASSWORD) 


LHBSUICBIES LE EREE RE JAP RE FEMA E 


this.editTextName.setText (name) 


this.editTextPassword.setText (password) 
} 
运行 试 一 下 ! 在 注册 页 面 输 入 用 户 名 和 密码 ， 单 击 OK 按钮 ， 回 到 登录 页 面 ， 是 不 是 用 户 
名 和 密码 都 显示 在 相应 的 控件 中 了 ? 
总 结 一 下 这 个 过 程 : 
(1) 启动 Activity 时 用 方法 startActivityForResultO 。 
(2) 重 写 onActivityResult0 方 法 获取 返回 的 数据 。 
(3) 用 setResult0 设 置 返回 数据 。 
(4) 用 request code 区 分 是 哪个 Activity 返回 了 。 
(5) Activity 之 间 传 递 数 据 用 Intent。 


8 " 6 ActionBar 上 的 返回 图 标 


ActionBar 翻译 为 “动作 栏 ”， 但 也 有 人 把 它 称 作 “导航 栏 ”或 AppBar。 不 论 是 登录 页 面 
还 是 注册 页 面 ， 它 们 都 有 ActionBar， 即 图 8-15 中 浅 绿色 部 分 所 示 。 


图 8-15 


Android 推荐 我 们 在 ActionBar 上 显示 返回 图 标 , 位 置 就 在 ActionBar 的 最 左边 , 也 就 是 图 
8-15 中 的 标题 位 置 。 点 它 时 返回 上 一 个 页 面 〈 注 意 点 它 时 做 什么 由 我 们 决定 ， 并 不 是 默认 就 
有 此 功能 ) 。 然 而 ， 默 认 情 况 下 这 个 返回 图 标 是 不 显示 的 ， 我 们 需要 用 代码 把 它 显示 出 来 。 
首先 要 明白 ， 在 入 口 页 面 ， 即 登录 页 面 (MainActivity) 返回 的 话 ， 其 实 是 返回 桌面 ， 而 
在 注册 页 面 返回 时 是 返回 到 登录 页 面 。 登 录 页 面 与 注册 页 面 实现 Action Bar 的 方式 不 一 样 , 所 
以 我 们 都 要 演示 一 下 。 
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8.6.1 原生 Action Bar 5 MaterailDesign Action Bar 


登录 页 面 与 注册 页 面 的 Action Bar 的 区 别 在 哪里 呢 ? 登录 页 面 使 用 的 是 原生 ActionBar， 
而 注册 页 面 使 用 的 是 符合 Android 最 新 视觉 设计 思想 Material Design 的 自 定 义 ActionBar。 

对 比 一 下 两 个 Activity HY layout XAF. K| 8-16 是 登录 页 面 的 , 其 最 外 层 是 一 个 ScrollView， 
它 代表 的 是 内 容 区 ， 跟 ActionBar 无 关 。 我 们 之 所 以 能 看 到 ActionBar， 是 因为 Activity 自 带 了 
ActionBar。 图 8-17 是 注册 页 面 。 


Component Tree > Component Tree 

IW) ScrollView = CoordinatorLayout 

v ^L, ConstraintLayout. v Él AppBarLayout 
四 imageview EB toolbar 


2». editTextName Y «include»- Glayout/content regis 
2b. editTextPassw: d © fab 

Œ buttonLogin 

IB buttonRegister “注册 


图 8-16 8-17 


注册 页 面 的 最 外 层 是 一 个 CoordinatorLayout。 先 不 要 在 意 这 个 Layout 的 作用 ， 我 们 可 以 
看 到 这 个 Layout 包含 了 AppBarLayout， 而 AppBarLayout 又 包含 了 ToolBar。 我 们 在 注册 页 面 
看 到 的 ActionBar 就 是 ToolBar 控件 。 也 就 是 说 ,注册 页 面 中 实现 了 一 个 ActionBar， 所 以 需要 
把 原生 的 ActionBar 隐藏 掉 ， 否 则 就 会 显示 两 个 ActionBar。 如 何 隐藏 呢 ?Android 为 我 们 提供 
了 非常 简单 的 方法 : 使 用 Theme. Android 使 用 哪个 Theme 需 在 Manifest 文件 中 指定 : 


<application 


</application> 


application 也 有 theme 属性 ， 它 决定 了 默认 的 theme， 如 果 activity 中 不 指定 theme， 就 会 
使 用 application 中 所 规定 的 .而 activity 也 可 以 单独 设置 theme, 会 覆盖 掉 application 的 theme. 

默认 的 theme“AppTheme” 是 用 于 显示 原生 ActionBar 的 ， 而 RegisterActivity 使 用 的 
theme“AppTheme NoActionBar” 是 没有 ActionBar 的 ， 即 不 显示 原生 的 ActionBar。 所 以 
RegisterActivity 中 利用 特殊 的 Layout 控件 和 ToolBar 自 定 义 了 ActionBar， 这 种 方式 符合 
Android 最 新 的 UI 设计 思想 : Material Design。 


8.60.2 ”登录 页 面 显示 返回 图 标 


要 想 设置 返回 图 标 ， 需 要 先 获 得 ActionBar 对 象 。 
登录 页 面 用 的 是 Android 原生 的 ActionBar, 所 以 只 需 调用 方法 getSupportActionBar() BI nT 
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获得 ActionBar 对 象 .注意 , Activity 还 有 一 个 方法 getActionBar(), 看 起 来 也 是 获取 ActionBar， 
但 是 它 是 不 能 用 的 ， 因 为 我 们 在 创建 Activity 时 使 用 了 Support 库 中 的 类 ( 见 图 8-18) 。 


import android[support).v7.app.AppCompatActivity 
import kotlinx.android.synthetic.main.activity main.* 


class MainActivity : AppCompatActivity() { 


8-18 


MainActivity 从 类 AppCompatActivity 派生 ， 而 AppCompatActivity 属于 support 库 。 如 果 
不 使 用 Support 库 ， 就 要 使 用 getActionBar0 获 取 ActionBar 了 。 
设置 返回 图 标的 代码 如 下 : 


override fun onCreate(savedInstanceState: Bundle?) { 
super.onCreate (savedInstanceState) 
setContentView(R.layout.activity main) 


//f£ ActionBar LA zik BIRR 
supportActionBar?.setDisplayHomeAsUpEnabled (true); 


运行 后 ， 登 录 页 面 的 效果 如 图 8-19 所 示 。 

如 何 响应 对 它 的 单 击 呢 ? 并 不 是 设置 侦 听 器 ， 而 是 需 
要 在 Activity 类 中 重 写 父 类 的 方法 onOptionsItemSelected()， 
代码 如 下 : 


override fun onContextItemSelected (item: 图 8-19 
MenuItem?): Boolean ( 
if (item !- null && item?.itemId -- android.R.id.home)( 
LHP B OBUI 
val snackbar - Snackbar.make (editTextName, 
"你 再 点 我 ， 我 真 要 退出 了 ! ", 
Snackbar.LENGTH LONG) 
// BRET 
snackbar .show () 
return true; 


} 


return super.onContextItemSelected (item) 


} 


这 个 方法 的 参数 是 MenuItem 类 型 ， 看 名 字 是 一 个 菜单 项 。 其 实 这 个 方法 就 是 用 于 响应 菜 
单 选择 的 。 所 以 ActionBar 上 的 返回 图 标 也 是 一 个 菜单 项 ， 其 ID 是 内 置 的 ， 其 常量 叫 作 
android.R.id.home。 

我 们 获取 了 菜单 项 的 ID, 然后 进行 比较 , 如 果 是 返回 图 标 被 选择 了 , 就 向 用 户 发 出 提示 。 
注意 ， 在 这 个 方法 中 ， 当 一 个 菜单 项 被 响应 后 ， 应 返回 trues 
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注意 ，Snackbarmake() 方 法 的 第 一 个 参数 是 一 个 按钮 ， 并 不 是 想 把 提示 显示 在 按钮 中 ， 而 
是 会 从 按钮 开始 自动 找 一 个 合适 的 父 控件 来 显示 提示 。 


8.6.3 ”注册 页 面 显 示人 返回 图 标 
在 RegisterActivity 的 onCreate0 方 法 中 ， 可 以 看 到 这 一 句 (字体 加 粗 行 》: 


override fun onCreate(savedInstanceState: Bundle?) { 

super.onCreate (savedInstanceState) 
setContentView(R.layout.activity register) 
setSupportActionBar (toolbar) 

先 获 取 Layout 中 定义 的 ToolBar， 然 后 将 这 个 ToolBar 设置 成 SupportActionBar， 既 然 把 
ToolBar 模拟 成 了 ActionBar, 那么 我 们 是 不 是 可 以 通过 getSupportActionBar0 来 获取 ActionBar? 
是 不 是 可 以 通过 调用 ActionBar 的 setDisplayHomeAsUpEnabled() 方 法 显示 出 返回 图 标 ? 是 不 是 
可 以 在 方法 onOptionsItemSelected0 中 响应 选中 事件 ? 全 对 ! 

我 们 单 击 返 回 图 标 是 要 返回 登录 页 面 CMainActivity) 的 ， 所 以 应 在 响应 选中 事件 的 方法 
中 关 掉 当前 Activity， 其 处 理 方式 跟 Cancel 按钮 完全 一 样 〈 此 方法 位 于 RegisterActivity 中 ) : 

override fun onContextItemSelected (item: MenuItem?): Boolean ( 

if(item !-null && item.itemId -- android.R.id.home)( 
finish() 
return true 


) 


return super.onContextItemSelected (item) 


) 
运行 App， 进 入 注册 页 面 ， 单 击 返 回 图 标 ， 是 不 是 回 到 登录 页 面 了 ? 


8 é 7 ScrollView 与 软 键盘 


其 实现 在 的 App 还 有 个 不 理想 的 地 方 , 就 是 在 向 文本 框 输入 
时 ， 由 于 软 键盘 的 出 现 会 把 文本 框 顶 到 上 面 而 被 遮 住 ， 因 此 就 会 
看 不 到 输入 的 字符 ， 在 注册 页 面 尤 甚 ， 如 图 8-20 所 示 。 

为 什么 会 出 现 这 种 现象 呢 ? 这 是 ScrollView 与 软 键盘 冲突 引 
起 的 。 我 们 只 需要 设置 软 键盘 的 显示 模式 ， 让 它 适 应 ScrollView 
的 特性 就 可 以 了 ， 软 键盘 属于 Activity， 设 置 代码 要 放 在 
MainActivity 和 RegisterActivity 的 onCreate0 中 ， 修 改 后 如 下 : 


override fun onCreate (savedInstanceState: Bundle?) ( qlwlelr|ltlylulilolp 


super.onCreate (savedInstanceState) 
setContentView(R.layout.activity main) 8-20 
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// BEKRA, UH ScrollView Dez 
window.setSoftInputMode( 

WindowManager.LayoutParams.SOFT INPUT ADJUST PAN 

or WindowManager.LayoutParams.SOFT INPUT STATE HIDDEN) 


SOFT INPUT ADJUST PAN 使 得 软 键盘 适应 ScrollView. iij SOFT INPUT STATE - 
HIDDEN 使 得 软 键盘 在 刚 启 动 时 不 会 自动 蹦 出 来 。 


2.9 ma 


8.8.1 MainActivity 
MainActivity 的 源码 如 下 : 


class MainActivity : AppCompatActivity() ( 
1ER, BER ACE D EFR 
/ HIER S T BS 
companion object( 
val REGISTER REQUEST CODE - 123 
val KEY NAME-"name" 
val KEY PASSWORD-"password" 


override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 
setContentView(R.layout.activity main) 


// BEUA, UMER Scro1lView OH 
window.setSoftInputMode ( 

WindowManager.LayoutParams.SOFT INPUT ADJUST PAN 

or WindowManager.LayoutParams.SOFT INPUT STATE HIDDEN) 


//f£ ActionBar LAE zik [I Ef 


supportActionBar?.setDisplayHomeAsUpEnabled (true); 


ILHRBBEBIIILT 
//val editTextName:EditText = findViewById(R.id.editTextName); 


// REHM nint AE 
this.editTextName.setHint (" 请 输入 用 户 名 ") ; 


// EREA E dz, LI Lambda YEH 
this.buttonLogin.setOnClickListener ( 

//8l& Snackbar XR 

val snackbar = Snackbar .make (it, "RART?" , Snackbar . LENGTH_LONG) ; 
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// BRIER 
snackbar .show (); 


} 
1/1 ERETZA, AEMT 


this.buttonRegister.setOnClickListener( 
//8l&& Intent XR 
val intent = Intent (thisG8MainActivity, 
RegisterActivity::class.java) 
// HS Activity 
this8MainActivity.startActivityForResult (intent, 
MainActivity.Companion.REGISTER REQUEST CODE) 


override fun onActivityResult(requestCode: Int, resultCode: Int, data: 


Intent?) ( 
if (requestCode === Companion.REGISTER REQUEST CODE) ( 
/  ÉBLBZEB DEL T 
if (resultCode --- Activity.RESULT OK) ( 


11 HERM R PRIT ÉNE ARDT, A data TUUS RIBIREUE. 
val name = data?.getStringExtra(Companion.KEY NAME) 
val password = data?.getStringExtra (Companion.KEY PASSWORD) 


LLHBICPIEIHLE EREE RE JAP BIS EHATE 
this.editTextName.setText (name) 
this.editTextPassword.setText (password) 


} 
110A — FERKA 


super.onActivityResult(requestCode, resultCode, data) 


override fun onContextlItemSelected(item: MenuItem?): Boolean { 
if (item !- null && item?.itemId -- android.R.id.home)( 
/LLERUPS BIO OBI 
val snackbar = Snackbar.make(editTextName, 


"你 再 点 我 ， 我 真 要 退出 了 ! ", 
Snackbar.LENGTH LONG) 
// BIER 
snackbar .show () 
return true; 


return super.onContextItemSelected(item) 
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8.8.2 RegisterActivity.kt 
RegisterActivity.kt 的 源码 如 下 : 


class RegisterActivity : AppCompatActivity() { 
override fun onCreate(savedInstanceState: Bundle?) { 
super.onCreate (savedInstanceState) 
setContentView(R.layout.activity register) 
setSupportActionBar (toolbar) 


//LLRBEEBHIUBE DUAE Scro11view WO 
window.setSoftInputMode( 

WindowManager.LayoutParams.SOFT INPUT ADJUST PAN 

or WindowManager.LayoutParams.SOFT INPUT STATE HIDDEN) 


fab.setOnClickListener ( view -> 
Snackbar.make(view, "Replace with your own action", 
Snackbar.LENGTH LONG) 
-SetAction("Action", null).show() 


// IE Cancel AHMAT 

this.buttonCancel.setOnClickListener( 
//ŽØRAE 
thisGRegisterActivity.finish() 


/ BB OK FEET E T 
buttonOk.setOnClickListener( view-» 
/L HERE 
val name - editTextName.text.toString() 
val password - editTextPassword.text.toString() 
val email - editTextEmail.text.toString() 
val phone - editTextPhone.text.toString() 
val address - editTextAddress.text.toString() 


var sex = false //f£4/, Kf] true CEF., false GRA, BUIK 


LLHERUB VE ECUIDEDIP BER P EEEEIÉD ID 
val checkRadioId = radioGroup.checkedRadioButtonlId 
/ LARA 1D SETÍUREBIEUEEHIES ID, WE sex By true 
if (checkRadioId -- R.id.radioMale) ( 

sex = true 


//TERT 
//TODO: fi E ELA ERKA E 
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//8l& Intent HR, IRE EGEPIEUSHE, RIR mERAP E RISFEIEU RT 

val intent - Intent() 

intent.putExtra (MainActivity.Companion. KEY NAME, name) 
intent.putExtra(MainActivity.Companion.KEY PASSWORD, password) 


//L BERGE FIBER, E INESIUB SDK UE X BIA Ege Activity EKT 
/ILBL—IEEDB ELS OR RIBIEHERI Intent HR 
setResult(Activity.RESULT OK, intent) 


/LCBI BIO Activity 
finish() 


override fun onContextItemSelected(item: MenuItem?): Boolean ( 
if(item !-null && item.itemId -- android.R.id.home)( 
finish() 
return true 
) 


return super.onContextItemSelected (item) 


在 前 面 讲 Activity 的 时 候 提 到 了 Theme. Theme 也 叫 Style， 它 们 是 相同 的 概念 ， 只 不 过 
作用 到 Activity 上 就 叫 Theme， 作 用 到 控件 上 就 Style。 "y 

Style/Theme 中 包含 了 一 堆 与 控件 或 窗口 的 外 观 相关 的 > Ea drawable 
属性 ， 比 如 高 、 宽 、 空 白 大 小 、 前 景色 、 字 体 大 小 、 字 体 颜 >: Baie 


色 等 。 如 果 使 用 过 HTML+CSS， 就 会 知道 style/Theme 相当 | Bue. 
于 CSS， 利 用 它 可 实现 界面 的 内 容 与 设计 相 分 离 的 模式 ， dia colorsxmi 
layout 文件 中 定义 了 界面 的 内 容 ， 而 style 文件 中 定义 了 内 容 ie 
的 外 观 。 ii stylesxml 
Style 也 是 一 种 资源 ， 放 在 如 图 9-1 所 示 的 位 置 。 例 如 ， 
示例 Stylexml 中 的 内 容 如 下 : ids 
«resources» 
«!-- Base application theme. --> 
<style name-"AppTheme" parent-"Theme.AppCompat.Light.DarkActionBar"-^ 
«!-- Customize your theme here. --> 


<item name-"colorPrimary"^68color/colorPrimaryc/item» 
<item name-"colorPrimaryDark"»68color/colorPrimaryDark«/item» 
<item name-"colorAccent"»8color/colorAccentc/item^ 

</style> 


<style name="AppTheme .NoActionBar"> 
<item name="windowActionBar">false</item> 
<item name="windowNoTitle">true</item> 
</style> 


<style name-"AppTheme.AppBarOverlay" 
parent-"ThemeOverlay.AppCompat.Dark.ActionBar" /> 
<style name-"AppTheme.PopupOverlay" 
parent-"ThemeOverlay.AppCompat.Light" /> 
</resources> 


此 文件 中 定义 了 四 个 <style> 元 素 。 第 一 个 style 是 Manifest 文件 中 <Application> 中 指定 的 
默认 theme (Jil, manifest 文件 ) name 属性 定义 它 的 名 字 为 “AppTheme”，<item> 元 素 指明 
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了 这 个 Style 中 定义 了 哪些 与 界面 外 观 相 关 的 属性 。item 的 name 必须 是 某 个 控件 或 窗口 属性 
的 名 字 ,item 的 内 容 根据 所 属性 不 同 而 有 不 同 的 值 ,比如 规定 colorPrimary( 主 要 颜色 ) 的 item， 
它 的 值 “@colorcolorPrimary” 是 一 个 颜色 资源 〈 以 “@ ”开头 表示 用 ID 引用 一 个 资源 ) 。 

这 个 Style 如 何 起 作用 呢 ? 如 果 把 这 个 Style 应 用 到 某 个 Activity 中 ,这 个 Activity 包含 了 
某 个 控件 ， 而 这 个 控件 具有 colorPrimary 属性 ， 这 个 属性 就 被 设 为 “@colorcolorPrimary” 所 
引用 的 颜色 。 如 果 没 有 控件 具有 此 属性 ， 那 么 此 item 就 不 起 作用 了 。 

可 以 在 某 个 已 存在 的 Style 基础 上 做 少量 改动 而 形成 新 的 Style， 作 为 基础 的 Style 就 是 父 
控件 。AppTheme 这 个 Style 的 parent 属性 指定 了 它 从 哪个 已 定义 的 Style 继承 。 

将 Style 设置 给 Activity 或 Application， 要 使 用 属性 “android:theme” (YE manifest 文件 
中 ) ; 设置 给 控件 时 ， 使 用 属性 “style ”在 layout 资源 文件 中 ) 。 

可 以 在 style 文件 中 定义 控件 和 窗口 的 哪些 属性 呢 ? 自己 上 网 查 吧 。 
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这 是 一 个 非常 重要 的 组 件 ! 

Fragment 既 像 Activity， 又 与 Activity 有 很 大 差别 ， 这 不 是 几 句 话 能 讲 清 的 。 首 先 要 记 住 
的 是 , Fragment 也 可 以 像 Activity 一 样 表示 一 个 页 面 , 但 是 Fragment 必须 依靠 Activity 才能 显 
示 出 来 ， 即 Fragment 被 Activity 所 包含 。 


实际 上 Activity 与 Fragment 都 不 是 那么 简单 就 能 定义 的 。 因 为 这 本 书 是 面向 零 基 础 的 初学 者 ， 


所 以 不 能 一 上 来 就 全 面 解释 各 种 东西 ， 只 能 先 给 出 一 个 具体 的 初步 概念 ， 随 着 后 面 的 深入 ， 慢 
慢 全面 了 解 。 


Fragment 在 很 多 方面 与 Activity 相似 ， 而 Fragment 是 从 Android 3.0 才 出 现 的 。 注 意 ， 
Fragment 并 没有 为 Android 系统 提供 比 Activity 更 多 的 功能 , 那 为 什么 又 出 现 个 Fragment We? 


弄巧成拙 的 Activity 


Activity 被 Android 设计 成 一 个 非常 独立 的 部 件 ， 并 由 此 淡化 了 进程 的 概念 。 

Android 希望 这 样 为 用 户 提供 功能 : 由 多 个 Activity 共同 配合 完成 比较 复杂 的 功能 ， 而 这 
些 Activity 可 以 来 自 不 同 的 App。 比 如 说 一 个 功能 需要 四 步 完 成 ， 就 要 有 四 个 Activity， 可 能 
其 中 第 一 个 来 自 App， 第 二 个 是 系统 自 带 的 某 个 App 中 的 Activity， 第 三 个 是 其 他 人 开发 的 
App 中 的 某 个 Activity， 第 四 个 是 自己 App 中 的 Activity， 而 它们 四 个 可 以 无 颖 结合 。 

因为 Activity 要 被 别人 使 用 , 所 以 在 设计 一 个 页 面 时 , 就 不 能 只 考虑 仅 满足 自己 App 中 的 
需求 ， 而 需要 把 Activity 封装 得 很 独立 。 这 一 点 可 以 从 Activity 的 启动 方式 和 数据 传递 方式 体 
现 出 来 。 就 拿 前 面 的 登录 页 面 与 注册 页 面 来 讲 ， 如 果 我 们 想 从 登录 页 面向 注册 页 面 传递 数据 ， 
假设 可 以 直接 调用 构造 方法 创建 Activity 实例 , 我 们 完全 可 以 通过 构造 方法 的 参数 向 注册 页 面 
传递 数据 。 但 是 ，Android 不 允许 ! Activity 必须 通过 Intent 启动 (其 实 是 由 系统 创建 Activity 
实例 ) ， 传 递 数据 也 必须 通过 Intent。 

在 Activity 之 间 传 递 数据 时 ， 即 使 不 能 用 构造 方法 直接 传递 ， 也 可 以 用 静态 变量 传递 ! 还 
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是 拿 登录 与 注册 页 面 来 说 , 它们 都 属于 同一 个 进程 , 当然 可 以 访问 App 中 的 同一 个 静态 变量 。 

但 是 , 不 要 这 样 做 ! 因为 同一 个 App 中 的 Activity 也 可 以 运行 于 不 同 的 进程 ! (可 以 在 Manifest 
文件 中 配置 某 个 Activity 只 运行 在 单独 的 进程 中 , 即 每 次 启动 它 都 需要 启动 一 个 新 的 App ERE 
Android 要 求 Activity 封装 独立 ， 除 了 满足 这 种 极端 的 重用 性 要 求 外 ， 还 有 一 个 原因 就 是 
节省 内 存 。 既 然 Activity 是 功能 封闭 的 ， 那 么 Android 系统 可 以 随时 杀 死 看 不 到 的 Activity 来 
释放 内 存 ， 等 需要 它 重新 显示 时 ， 系 统 先 把 它 创建 出 来 ,再 恢复 原来 的 样子 。 比 如 一 个 功能 有 
三 个 页 面 A、B、C， 用 户 从 A 到 B 到 C 一 步 一 步 执行 。 显 示 C 时 ，A 和 B 都 是 看 不 到 的 ， 

如 果 启 动 C 时 发 现 内 存 不 够 了 , 那么 系统 就 把 A F B 杀 死 ,同时 把 它们 的 内 容 保存 到 硬盘 上 。 

用 户 是 感觉 不 出 什么 异样 的 , 因为 此 时 用 户 看 到 C 页 面 还 活着 。 当 用 户 想 返回 上 一 个 页 面 (也 
就 是 B) 时， 系统 会 重新 创建 B 并 把 B 原来 的 内 容 恢复 ， 让 用 户 完全 感觉 不 出 B 是 死 而 复 
生 的 。 
现在 明白 为 什么 Activity 不 能 被 new 出 来 了 吧 ? 必须 由 系统 掌控 Activity 的 生死 。 现在 明 
白 为 什么 Activity 之 间 必 须 用 Intent 传递 数据 了 吧 ?Activity 必须 功能 封闭 。 现 在 明白 为 什么 
Activity 要 在 manifest 文件 中 声明 了 吧 ? 这 样 系统 才能 找到 Activity 的 类 ， 然 后 以 反射 的 方式 
创建 它 。 

看 来 这 个 设计 好 牛 啊 ! 果然 开发 者 是 高 手 。 但是， 有 时 看 起 来 很 美的 东西 ， 用 起 来 却 并 不 
美好 ， 从 实际 使 用 效果 来 讲 算得 上 是 弄巧成拙 了 : 
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第 一 ， 写 一 个 Activity 很 麻烦 ， 为 了 功能 封闭 ， 为 了 能 满 血 复活 ， 需 要 多 做 很 多 工作 ， 有 
时 逻辑 还 很 复杂 ， 让 人 焦头烂额 。 

第 二 ， 使 Activity 的 代码 变 腑 肿 ， 占 用 内 存 增多 ， 占 用 CPU 多 。 

第 三 ， 造 成 Activity 生命 周期 复杂 ， 令 人 讨厌 。 

第 四 ，Activity 重新 创建 时 需 执行 大 量 代码 ， 尤 其 是 恢复 数据 时 要 读 硬 盘 〈 存 储 ) ， 造 成 
界面 反应 慢 。 

PE, Activity 之 间 传 递 数据 很 麻烦 。 


实际 上 , 按照 传统 的 以 进程 为 中 心 的 方式 来 设计 App， 可 能 Android 系统 比 现在 的 运行 体 


第 一 ，Activity 不 用 写 那 么 复杂 ，App 进程 只 要 存在 ，Activity 就 不 会 被 杀 死 ， 也 就 不 用 考 
È Activity 复活 的 问题 了 ， 所 以 界面 切换 反应 肯定 要 快 得 多 。 

第 二 ， 生 命 周 期 带 辑 变 得 简单 ， 处 理 代码 也 就 少 了 ， 省 内 存 ; CPU 执行 的 代码 也 少 了 ， 
省 CPU。 

第 三 , Android 系统 不 是 单片机 ， 而 是 跟 Windows 一 样 的 高 级 操作 系统 ， 是 有 虚拟 内 存 (在 
Linux 中 叫 交 换 分 区 ) 的 。 如 果 物 理 内 存 不 够 用 ， 后 台 的 Activity 会 被 交换 到 硬盘 上 的 虚拟 
内 存 中 ， 而 不 必 杀 死 它 。 即 使 要 释放 内 存 ， 也 可 以 杀 后 台 进程 ， 不 用 杀 Activity。 

第 四 ，Activity 一 般 不 重复 使 用 ， 因 为 配色 、 排 版 、 操 作 模式 可 能 跟 自己 的 设计 差别 很 大 ， 
放 在 一 起 不 和 谐 。 

第 五 ， 不 用 Activity 的 方式 ， 系 统 也 可 以 以 其 他 方式 提供 给 我 们 这 些 功能 ， 比 如 一 个 类 库 
的 形式 。 
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Android 系统 占 内 存 多 ， 运 行 慢 ， 经 常 卡 ， 其 根本 原因 在 于 Activity 的 设计 ， 而 Java 或 
Kotlin 语言 的 影响 并 不 大 , 因为 Google 已 经 把 编译 优化 得 不 错 了 。 虽然 现在 硬件 都 很 强大 了 ， 
内 存 也 过 剩 ，Android 卡 的 问题 比 原来 少 得 多 了 ， 但 是 在 相同 配置 下 Android 还 是 比 IOS 和 
WinPhone 系统 要 慢 得 多 。 

Fragment 主要 就 是 为 提高 页 面 间 切 换 效 率 而 出 现 的 ， 虽 然 它 也 可 以 成 为 页 面 的 一 部 分 ， 
而 不 总 是 占据 整个 页 面 。 总 之 , 一 个 App 应 尽量 减少 Activity, 使 用 Fragment 来 代 蔡 Activity, 
让 各 页 面 由 Fragment 来 实现 。 


10.2 使 用 Fragment 


只 要 在 添加 Activity 时 选中 Fragment 项 ，Android Studio 就 会 自动 产生 一 个 带 有 fragment 
的 Activity。 现 在 添加 一 个 新 的 Activity， 命 名 为 TestFragmentActivity， 首 先 在 工程 的 app 组 
上 右 击 , 在 弹出 的 快捷 菜单 ( 见 图 10-1) 中 选择 Basic Activity 模板 , 因为 它 符合 Material Design, 
出 现 如 图 10-2 所 示 的 对 话 框 。 


S C++ Class Android Things Peripheral Activi F 2 uem we 
Ae i TE 
& C/C++ source File tT ee Extra CUNT 
7| £. C/C++ Header File 77 Blenk Wear Activity ayout Name: activity test fragment 
i} Image Asset kd 77 Bottom Navigation Activity 
Mb Vector asset Empty Activity Title: TestfragmentActivity 
E 7 Fragment + ViewModel 
/& Kotlin script makai C] Launcher Activity 
i sing! - DIM 
Feier: rm 77 Login Activity E] Use a Fragment 
/& Gradle Kotlin DSL Build Script mE eben ow 
» @ Gradle Kotlin DSL Settings = E A My Hierarchical Parent: E 
aes E 
NU mci CENE Package name: com.example.niu.firstcotlinapp. ~ 
LESS M Settings Activity 
= Tabbed Acti Source Language: Kotlin ~ 
10-1 图 10-2 


注意 ， 必 须 选 中 “Use a Fragment” 项 ， 单 击 Finish 
按钮 后 , Android Studio 自动 为 我 们 创建 此 Activity 相关 
的 文件 〈 见 图 10-3) 。 

可 以 看 到 比 之 前 创建 Activity 时 多 了 一 个 类 
(CTestFragmentActivityFragment ) 和 一 个 layout 文件 
(fragment test fragment.xml) 。 

activity test fragment.xml 是 定义 Activity 界面 外 围 

框架 的 文件 ， 存 放 Activity 内 容 部 分 的 layout 文件 是 
content test fragment.xml (被 activity test fragment.xml 
所 包含 ) ， 其 内 容 是 : 


L1 Mali 
RegisterActivi 
G TestFragmentActivity 
à TestFragmentActivityFragment 
> Ea com.example.niu firstcotlinapp (androidiTest) 
> Bs com.example.niu firstcotlinapp (test) 
> "ygenerstedJava 
v Bres 
> B drawable 


tivity main.xml 
sg activity register.xml 


am activity test fragment.xml 


s, content register.xml 
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«fragment xmlns:android- "http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/ apk/res-auto" 
xmlns:tools-"http://schemas.android.com/ tools" 
android:id-"Qrid/fragment" 
android:name-"com.example.niu. 

firstcotlinapp.TestFragmentActivityFragment" 
android:layout width-"match parent" 
android:layout height-"match parent" 
app:layout behavior="es tring/ appbar scrolling view behavior" 


tools:layout-"Glayout/fragment test fragment" /> 


此 文件 只 有 一 个 元 素 <fragment>， 定 义 了 一 个 Fragment。<fragment> 没 有 包含 子 元 素 ， 但 
预览 时 能 看 到 fragment 的 内 容 ， 因 为 “tools:layout” 的 存在 ， 其 值 指向 了 另 一 个 layout 文件 
fragment_test_fragmentxml， 这 个 文件 定义 了 fragment 的 内 容 。 注 意 ， 前 缀 “tools” 所 修饰 的 
属性 只 在 设计 时 起 作用 ， 在 运行 时 并 不 起 作用 ， 运 行 时 是 用 代码 来 关联 Fragment 与 其 layout 
文件 的 。 

这 是 Fragment 类 的 定义 : 

class TestFragmentActivityFragment : Fragment() { 

override fun onCreateView( 
inflater: LayoutInflater, container: ViewGroup?, 
savedInstanceState: Bundle? 
): View? ( 
return inflater.inflate(R.layout.fragment test fragment, container, 
false) 


) 


这 是 Android Studio 自动 为 我 们 产生 的 代码 , 方法 onCreateView0 是 在 显示 Fragment 内 容 
之 前 调用 的 ， 应 在 此 方法 中 创建 fragment 的 界面 。 如 果 要 从 layout 文件 创建 界面 控件 ， 就 必 
须 使 用 传 入 的 参数 “inflater”， 调 用 它 的 方法 inflater0 加 载 layout 资源 。inflater0 方 法 的 第 一 
个 参数 就 是 layout 资源 文件 的 id， 就 是 这 一 句 在 运行 时 把 Fragment 与 其 layout 定义 文件 关联 
到 一 起 的 。onCreateView0 的 第 二 个 方法 是 所 加 载 界面 的 根 View 要 放 入 的 控件 ， 作 为 这 部 分 
界面 的 容器 。 但是， 是否 真 的 作为 容器 还 需 视 第 三 个 参数 而 定 : 如 果 这 个 参数 为 tue， 就 做 容 
器 ; 否则， 就 不 做 。 如 果 不 做 容器 ， 可 以 用 它 来 创建 LayoutParament 对 象 (LayoutParament 
是 使 用 代码 进行 View 排版 的 ， 后 面 会 讲 ) 。 

Activity 是 调用 setContentViewQJIII Layout 资源 ， 而 这 里 是 根据 Layout 资源 创建 控件 并 
返回 。 返 回 的 控件 在 Fragment 显示 时 被 放 到 Activity 中 ， 这 样 就 看 到 了 Fragment 的 内 容 。 

“Inflater” 类 是 Android 中 专门 用 来 根据 资源 来 创建 对 象 的 。 有 多 种 Inflater, 根据 名 字 就 

可 以 看 出 用 途 ， 比 如 我 们 上 面 所 用 到 的 LayoutInflater 就 是 从 Layout 资源 创建 UI 对 象 的 。 

再 看 一 下 TestFragmentActivity 25: 


class TestFragmentActivity : AppCompatActivity() ( 
override fun onCreate(savedInstanceState: Bundle?) { 
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super.onCreate (savedInstanceState) 
setContentView(R.layout.activity test fragment) 
setSupportActionBar (toolbar) 


fab.setOnClickListener ( view -> 
Snackbar.make(view, "Replace with your own action", 
Snackbar.LENGTH LONG) 
-setAction("Action", null).show() 
$ 


) 


与 不 包含 Fragment 的 Activity 类 相 比 也 没有 什么 特殊 的 地 方 。 其 Layout 资源 是 
activity test fragment.xml , 这 个 文件 中 include 了 content test fragmentxml , 所 以 
setContentView() 执行 时 会 创建 出 Fragment, mi Fragment 在 创建 时 又 关联 了 
fragment test_fragmentxml， 于 是 就 在 Activity 的 内 容 区 看 到 了 fragment test fragment.xml 里 
面 定义 的 内 容 。 

Fragment 占据 了 整个 内 容 区 ， 此 时 Fragment 就 相当 于 一 个 页 面 ， 切 换 页 面 只 需 替换 
Fragment 即 可 。ActionBar 属 于 Activity, 不 属于 Fragment, 所 以 各 Fragment 共 享 一 个 ActionBar, 
我 们 可 以 在 切换 Fragment 时 改变 ActionBar 上 的 内 容 , 这 样 就 更 像 页 面 切换 了 。 下 面 我 们 把 登 
录 页 面 和 注册 页 面 改 用 Fragment 来 实现 。 


10.3 改造 登录 页 面 


我 们 将 把 MainActivity 作为 各 Fragment 的 宿主 。 
10.3.1 添加 layout 文 件 


当前 的 登录 页 面 MainActivity 只 有 一 个 layout 文件 (activity_main.xml) 来 定义 它 的 内 容 。 
当 我 们 改 用 Fragment 的 时 候 ， 由 于 Fragment 占据 了 Activity 的 内 容 区 ， 因 此 Activity 的 内 容 
应 移 到 fragment 的 layout 中 。 这 里 首先 为 Fragment 新 建 layout 文件 , 然后 把 activity main.xml 
的 内 容 复制 到 新 文件 中 。 创 建新 layout 资源 文件 的 过 程 如 下 : 

在 res/layout 组 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 new Layout resource file， 出 现 创建 资 
源 对 话 框 〈 见 图 10-4) 。 

在 “File name” 字 段 中 输入 “fragment login”， 其 余 不 用 动 。 至 于 “Root element ORJE 
素 ) ”字段 中 是 什么 不 重要 ， 因 为 我 们 后 面 要 重 定义 layout 中 的 内 容 ， 单 击 OK 按钮 ， 会 在 
res/layout/ 下 创建 fragment login.xml 文件 。 
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Eile name: fragment login 

Rootelement: ^ android.support.coffgaint.ConstraintLayout 
Source set: main 

Directory name: layout 


Available qualifiers: Chosen qualifiers: 


© Network Code 

© Locale 

区 Layout Direction 

E smallest Screen Width 


10-4 
10.3.2 ”改变 layout 文件 的 内 容 


新 layout 文件 创建 后 ， 将 activity main.xml 的 内 容 全 部 复制 并 粘贴 到 fragment login.xml 
中 蔡 换 现 有 内 容 。 然 后 把 activity_main.xml 的 内 容 改 成 如 下 形式 : 

<?xml version-"1.0" encoding="utf-8"?> 

<FrameLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:id="e+id/ fragment container" 
tools:context-".MainActivity"^ 


«/FrameLayout^ 


现在 只 剩 一 个 FrameLayout 而 已 ,并 且 这 个 layout 还 充满 了 整个 内 容 区 。 那 么 FrameLayout 
有 什么 特点 呢 ? 它 的 子 控件 只 能 位 于 左上 角 ， 适 合 多 个 View 切换 的 场景 。 我 们 可 以 把 一 个 
Fragment A FIXA FrameLayout 中 (实质 上 是 运行 时 把 Fragment HJAR View 设置 成 
FrameLayout 的 子 控件 ) 。 

当 把 新 的 Fragment 嵌入 到 FrameLayout 中 而 把 旧 的 删除 时 ， 就 完成 了 Fragment 的 切换 。 

注意 ， 这 个 FrameLayout 有 id 〈 见 “android:id” 属 性 ) : fragment layout。 因 为 我 们 需要 
通过 代码 把 Fragment 放 到 它 里 面 来 操作 ， 所 以 它 必 须 有 id。 


10.3.3 添加 Fragment 类 


有 了 Fragment 的 layout 文件 ， 还 要 创建 Fragment 类 ， 在 Fragment 类 中 关联 layout 文件 。 
把 Fragment 类 放 在 与 Activity 相同 的 包 下 , 在 包 上 右 击 , 而 后 在 弹出 的 快捷 菜单 中 选择 “New 
一 Kotlin File/Class ”命令 ( 见 图 10-5) 。 
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xmlns:app="http://schemas.android. com/apk/res-s 
@ Java Class 


4x Android Resource File 


10-5 


弹出 创建 类 的 对 话 框 ,填写 内 容 , 如 图 10-6 所 示 , 单 击 “OK” 按 钮 ,文件 LoginFragment.kt 
被 创建 。 它 的 内 容 很 简单 : 


class LoginFragment { 


} 

很 多 工作 都 需要 我 们 手动 完成 , 幸亏 有 现成 的 Fragment 
类 (TestFragmentActivityFragment) 可 以 参考 。 其 内 容 可 以 图 10-6 
全 部 复制 过 来 ， 需 要 改 的 就 是 一 个 地 方 ， 即 Fragment 的 Layout 资源 ID. LoginFragment 关联 
的 是 R.layout.fragment_test_fragment。 最 终 代 码 如 下 : 


class LoginFragment: Fragment() { 
override fun onCreateView( 
inflater: LayoutInflater, container: ViewGroup?, 
savedInstanceState: Bundle? 
): View? ( 
return inflater.inflate(R.layout.fragment login, container, false) 
) 
} 


前 面 讲 过 ， 在 Activity 中 放置 Fragment 时 ， 其 实 放 的 是 Fragment 的 根 控件 ， 就 是 这 里 返 
回 的 View. 

我 们 在 MainActivity 中 准备 了 一 个 FrameLayout 来 放置 Fragment， 但 是 Fragment 不 会 自 
动 把 自己 放 进去 ， 需 要 写 代 码 来 完成 。 

在 将 Fragment 放 入 Activity 之 前 ， 我 们 还 需要 在 Fragment 中 完成 登录 页 面 的 业务 逻辑 ， 
把 MainActivity 中 与 登录 相关 的 代码 移 到 LoginFragment 中 即 可 。 首 先 将 MainActivity 的 
onCreate() 方 法 中 的 以 下 代码 移 到 LoginFragment 中 : 


//L RBHETEIS nint IE 
this.editTextName.setHint ("请 输入 用 户 名 ") ; 


LLBLBEEORACEIE E tz EIE, U Lambda YEH 


this.buttonLogin.setOnClickListener ( 


// 8l Snackbar HR 
val snackbar = Snackbar .make (it, "RART?" , Snackbar .LENGTH LONG); 
// BRIEN 


snackbar. show (); 


} 


// TREMA, AEMT 


this.buttonRegister.setOnClickListener( 
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//8/& Intent HR 
val intent = Intent(thisG8MainActivity, RegisterActivity::class.java) 
// Hl Activity 
this8MainActivity.startActivityForResult (intent, 
MainActivity.Companion.REGISTER REQUEST CODE) 
) 


这 些 代 码 依然 需要 放 在 界面 对 象 创建 之 后 且 显示 之 前 ， 虽 然 可 以 放 在 onCreateViewO 
但 是 onViewCreated() 方 法 (在 onCreateView0 之 后 执行 ) 更 适合 ,因此 我 们 重 写 onViewCreated() 
方法 并 移入 代码 : 

override fun onViewCreated(view: View, savedInstanceState: Bundle?) ( 

super.onViewCreated(view, savedInstanceState) 


// BERM nint AHE 
editTextName . setHint(" 请 输入 用 户 名 ") ; 


/LBIUEER BEITIO ETE, DI Lambda YEH 
this.buttonLogin.setOnClickListener ( 


//Élt Snackbar AR 
val snackbar = Snackbar .make (it, ff ART! E?", Snackbar.LENGTH LONG); 
// BRER 


snackbar. show () ; 


} 


/LBBUREA ERAI, AEM 
this.buttonRegister.setOnClickListener( 
//Él&t Intent A $ 
val intent = Intent(this?MainActivity, RegisterActivity::class.java) 
// ESI Activity 
thiseMainActivity.startActivityForResult(intent, 
MainActivity.Companion.REGISTER REQUEST CODE) 


) 


放 到 onCreateView0O 中 后 会 出 现 一 些 错误 ， 下 面 我 们 逐个 解决 。 

首先 是 控件 变量 变 成 红色 , 说 明 找 不 到 这 个 变量 的 定义 了 。 其 解决 方式 与 Activity 中 一 样 ， 
导入 一 个 类 ， 还 是 借助 “Alt+Enter” 快 捷 键 ， 此 时 会 弹出 一 个 菜单 ( 见 图 10-7) ， 选 择 中 间 
这 项 ， 因 为 这 个 editTextName 控件 是 在 fragment login.xml 中 定义 的 。 


/ it Ef hint bi 


editTexthame.sethint(" 请 输入 用 户 名 "); 


kotlinxandroid.synthetic main.content registereditTextName » 


10-7 
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其 次 是 响应 注册 按钮 单 击 事件 的 代码 ， 因 为 我 们 不 再 以 Activity 作为 注册 页 面 ， 而 改 用 
Fragment， 所 以 把 启动 RegisterActivity 的 代码 删 掉 ， 这 部 分 代码 先 留 空 ， 后 面 再 设 。 所 以 
LoginFragment 的 onViewCreated() 方 法 代码 最 终 如 下 : 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) ( 


super.onViewCreated(view, savedInstanceState) 


// REIM nint f£ 
editTextName.setHint (" 请 输入 用 户 名 ") ; 


/LLBEBOR EDI E d; EIE, L Lambda 为 参考 
this.buttonLogin.setOnClickListener ( 


//Él& Snackbar X $t 
val snackbar = Snackbar .make (it, "你 点 我 干 喻 ?"， Snackbar.LENGTH LONG); 
// BRER 


snackbar. show () ; 


) 


/L LBBEPEBHEEEL, EA GEM 
this.buttonRegister.setOnClickListener( 
// TODO : REMA 
Li 
) 


再 来 看 MainActivity， 其 onCreate() 方 法 变 为 : 


override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 
setContentView(R.layout.activity main) 


//Æ Action Bar L78 BRIR 
supportActionBar? .setDisplayHomeAsUpEnabled (true); 


} 
还 需要 把 MainActivity 的 onActivityResult0 方 法 删 掉 ,因为 我 们 不 再 启动 RegisterActivity， 
所 以 也 不 需要 响应 Activity 返回 事件 了 。 现 在 把 MainActivity 的 onOptionsItemSelected() 方 法 改 
一 下 ， 最 终 MainActivity 类 的 代码 如 下 : 
class MainActivity : AppCompatActivity() { 
LTHKTEXER, BOB ACE D EIR 
V/Z TARRE TE? 
companion object{ 
val REGISTER_REQUEST_CODE = 123 


val KEY_NAME="name" 
val KEY PASSWORD-"password" 


override fun onCreate(savedInstanceState: Bundle?) { 
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super.onCreate (savedInstanceState) 


setContentView(R.layout.activity main) 


// REKRAI, UEH Scrollview ORBI 


window.setSoftInputMode ( 
WindowManager.LayoutParams.SOFT INPUT ADJUST PAN 
or WindowManager.LayoutParams.SOFT INPUT STATE HIDDEN) 


//f£ ActionBar Ld avis [B] Edi 
supportActionBar?.setDisplayHomeAsUpEnabled (true); 


//Él& Fragment HJR 
val fragment = LoginFragment () 


//1&38 —fh Fragment (ØR Fragment) MA Activity 办 

// It Fragment 4 

supportFragmentManager.beginTransaction() 
.add(R.id.fragment container, fragment) 
-commit () 


override fun onOptionsItemSelected(item: MenuItem?): Boolean ( 
if (item !- null && item?.itemId -- android.R.id.home)( 
return true; 
) 


return super.onOptionsItemSelected (item) 


) 


MainActivity 中 已 经 没有 登录 逻辑 代码 了 。 现 在 运行 的 话 ， 只 看 到 一 片 空白 ， 因 为 它 的 内 
区 只 是 一 个 空 的 FrameLayout， 下 面 就 把 LoginFragment 放 到 FrameLayout 中 o 


10.3.4 将 Fragment 放 到 Activity 中 


我 们 需要 在 界面 显示 之 前 就 把 Fragment 放 到 Activity 中 ,所 以 在 MainActivity 的 onCreate() 


中 加 入 以 下 代码 : 
//I&3À —f Fragment (EX Fragment) HÀ Activity 办 
// Kt Fragment X4 
val fragmentTransaction - supportFragmentManager.beginTransaction() 
//Bl& Fragment XR 


val fragment = LoginFragment() 
fragmentTransaction.add(R.id.fragment container, fragment) 


fragmentTransaction.commit () 


这 段 代码 首先 创建 了 一 个 Fragment 的 实例 .这 里 要 十 分 注意 了 , 与 Activity 不 同 , Fragment 


实例 直接 由 我 们 创建 ， 它 的 实例 也 可 以 保存 下 来 ， 只 要 对 这 个 Fragment 的 引用 存在 ， 它 就 不 


130 


第 10 章 Frag 


会 被 销毁 ， 所 以 我 们 可 以 控制 Fragment 的 生死 ! 之 后 通过 管理 器 开启 一 个 事务 ， 然 后 通过 事 
务 将 Fragment 加 入 MainActivity 中 指定 的 容器 控件 (FrameLayout) 中 ， 最 后 提交 事务 。 所 有 
对 Fragment 的 添加 、 删 除 、 蔡 换 等 操作 必须 放 在 事务 中 。 现 在 MainActivity 的 onCreate0 方 法 
代码 如 下 : 


override fun onCreate(savedInstanceState: Bundle?) ( 


) 


super.onCreate (savedInstanceState) 
setContentView(R.layout.activity main) 


// BEURER, UMER Scrollview BOBO 
window.setSoftInputMode ( 
WindowManager.LayoutParams.SOFT INPUT ADJUST PAN 
or WindowManager.LayoutParams.SOFT INPUT STATE HIDDEN) 


//f£ ActionBar L878 [RTETER 
supportActionBar?.setDisplayHomeAsUpEnabled (true); 


// 4838 —f Fragment (ØR Fragment) HMA Activity 办 

// It Fragment S4 

val fragmentTransaction - supportFragmentManager.beginTransaction() 
// Él& Fragment HK 

val fragment - LoginFragment() 
fragmentTransaction.add(R.id.fragment container, fragment) 
fragmentTransaction.commit () 


运行 一 下 App， 是 不 是 登录 页 面 又 出 现 了 ? 
其 实 添加 Fragment 的 那 段 代 码 可 以 再 改进 一 下 ， 据 说 这 是 Kotlin 推荐 的 方式 ， 也 是 现在 
流行 的 “ 流 式 调用 ”《〈 粗 体 部 分 ) : 


override fun onCreate(savedInstanceState: Bundle?) ( 


super.onCreate (savedInstanceState) 
setContentView(R.layout.activity main) 


// BEURER, DUE ScrollView KPIR 
window.setSoftInputMode ( 

WindowManager.LayoutParams.SOFT INPUT ADJUST PAN 

or WindowManager.LayoutParams.SOFT INPUT STATE HIDDEN) 


//1£ ActionBar L78 PRR 
supportActionBar?.setDisplayHomeAsUpEnabled (true); 


// Él Fragment XHK 


val fragment = LoginFragment () 


//J&38 —fh Fragment (ØR Fragment) HA Activity 办 
//X&lt Fragment X 
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supportFragmentManager.beginTransaction() 
.add(R.id.fragment container, fragment) 
.commit() 


但 是 现在 单 击 注册 按钮 不 会 出 现 注册 页 面 ,因为 我 们 还 需要 创建 一 个 “注册 Fragment”。 


事务 是 一 个 非常 常见 的 概念 ， 在 很 多 系统 中 都 存在 ， 尤 其 是 数据 库 . 事务 的 使 用 有 一 个 很 大 的 
特点 ， 就 是 有 一 个 “开始 一 执行 业务 一 提交 ”的 过 程 。 新 手 最 容易 忘掉 的 是 提交 事务 。 


10.3.5 创建 注册 Fragment 


创建 Fragment 的 方式 与 LoginFragment 不 同 , 这 次 我 们 借助 Android Studio 提供 的 工具 把 
Fragment 类 和 它 对 应 的 layout 文件 一 起 创建 出 来 。 过 程 如 下 : 


在 App 组 上 右 击 ， 然 后 在 弹出 的 快捷 菜单 


Fragment Name: RegisterFragment 
中 选择 | New — Fragment — Fragment(Blanl) pis E 
命令 ( 见 图 10-8) ， 出 现 新 建 组 件 对 话 框 ( 见 | areon a 
图 10-9) 。 


C include fragment factory methods? 
Z Include interface callbacks? 


Source Language: Kotlin Y 


4& Google > [X Fragment (List) 
ĝi Other » [i Fragment (with ViewModel) 


ĝi Service » [a Fragment (with a +1 button) Target Source Set: main v 


ĝi Ul Component. » Li Modal Bottom Sheet 


图 10-8 图 10-9 
在 “Fragment Name” 字 段 中 填写 “RegisterFragment”， 必 须 确保 “Create layout XML" 
被 选中 ， 且 不 要 选中 “Include fragment factory methods” 和 “Include interface callbacks”， 单 
击 “Finish” 按 钮 。 之 后 Grade 添加 了 两 个 文件 : 一 个 是 RegisterFragment.kt; 另 一 个 是 
layout/fragment register.xml。 
由 于 此 Fragment 是 来 代替 RegisterActivity HJ, 因此 我 们 可 以 把 RegisterActivity 的 layout 文件 
content_register.xml 的 内 容 全 部 复制 到 fragment register.xml 中 。 再 改 一 个 地 方 ， 把 下 面 这 一 句 : 


tools:context-".RegisterActivity"» 

BUS: 

tools:context-"com.example.niu.firstcotlinapp.RegisterFragment"» 

前 面 讲 过 , 带 有 “tools” 前 级 的 属性 只 在 设计 时 起 作用 ,运行 时 不 起 作用 ,所 以 这 里 改 不 
改 都 不 影响 运行 ， 只 是 设 对 了 可 以 为 界面 设计 器 提供 一 些 帮助 。 

看 一 下 RegisterFragment 类 的 内 容 : 


class RegisterFragment : Fragment() { 


override fun onCreateView( 
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inflater: LayoutInflater, container: ViewGroup?, 
savedInstanceState: Bundle? 

): View? ( 
// Inflate the layout for this fragment 


return inflater.inflate(R.layout.fragment register, container, false) 
} 
很 简单 ， 跟 前 面 我 们 自己 加 的 代码 一 样 ， 主 要 是 把 layout 文件 与 此 Fragment 进行 关联 。 
下 一 步 我 们 把 RegisterFragment 显示 出 来 看 一 看 。 
10.3.6 显示 RegisterFragment 


依然 需要 在 登录 页 面 单 击 “ 注 册 ” 按 钮 显示 注册 页 面 .现在 的 登录 页 面 是 LoginFragment. 
只 要 在 响应 注册 按钮 单 击 的 代码 中 用 RegisterFragment 代 蔡 LoginFragment 就 完成 了 页 面 切换 。 
修改 LoginFragment 类 的 onCreateView0 方 法 ， 增 加 (黑体 部 分 ) 如 下 : 


/LLBLBERERBHETEL, EA ZEE 
this.buttonRegister.setOnClickListener( 


/ LBARIBEBPRT 
val fragment = RegisterFragment() 
// ZEILE TE UR E 


val fragmentManager = activity!!.supportFragmentManager 
fragmentManager.beginTransaction() 
.replace(R.id.fragment container, fragment) 
.addToBackStack ("login") 
.commit() 


} 

replace()77 iH] F Ë Fragment, 它 的 第 一 个 参数 是 Fragment 所 在 的 容器 , 第 二 个 参数 是 
新 的 Fragment。 

addToBackStack0 方 法 的 作用 是 把 这 次 操作 放 到 “后 退 栈 ”中 ， 这 样 当 用 户 单 击 设备 上 的 
返回 键 时 就 会 进行 反 向 操作 , 也 就 是 退回 到 登录 页 面 。 当 然 也 可 以 通过 FragmentManager 执行 
反 向 操作 。 它 的 参数 是 一 个 字符 串 ， 是 为 这 次 操作 取 的 名 字 ， 用 于 查找 某 个 操作 ,在 这 里 没 什 
么 作用 。 

现在 可 以 运行 App 了 ， 单 击 注册 按钮 是 不 是 进入 了 注册 页 面 ? 按 下 后 退 键 是 不 是 回 到 了 
登录 页 面 ? 但 是 ， 仅 通过 按 返 回 键 回 到 登录 页 面 并 不 能 满足 需求 ， 我 们 还 想 通过 单 击 AppBar 
上 的 返回 图 标 返 回 上 一 个 页 面 ， 这 是 下 一 节 要 讲 的 。 


10.3.7 ”通过 AppBar 控制 页 面 导航 


现在 不 论 切 换 到 哪个 页 面 ，Activity 并 没有 变 。ActionBar 也 属于 Activity, 所 以 ActionBar 
也 是 同一 个 。 还 记得 原来 是 哪个 方法 响应 ActionBar 上 返回 图 标 单 击 事件 的 吗 ? Activity 的 
“onOptionsItemSelected0:” 在 其 中 响应 android.R.id.home 菜单 项 即 可 。 要 想 回 到 上 一 个 
Fragment， 只 需要 把 当前 的 Fragment 从 后 退 栈 中 弹出 即 可 ， 代 码 如 下 : 
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override fun onOptionsItemSelected(item: MenuItem?): Boolean { 
if (item !- null && item?.itemId == android.R.id.home)( 
if (item.itemId -- android.R.id.home) ( 
//cÉif Action Bar Hj PIPIR 
supportFragmentManager.popBackStack () //M P Zl dl Hf Fragment 
return true 
i 
return true; 
} 
return super.onOptionsItemSelected (item) 


) 


我 们 调用 了 popBackStack() 方 法 将 当前 的 Fragment 弹出 ， 回 到 上 一 个 Fragment， 但 前 提 
是 当初 进行 页 面 切换 时 调用 了 addToBackStack() 方 法 。 

注意 ! 当 回 到 登录 页 面 时 ， 再 单 击 返回 图 标 ， 此 处 代码 依然 被 执行 ， 然 而 由 于 加 入 登录 
Fragment 时 并 没有 调用 popBackStack0， 因 此 此 处 代码 虽 被 执行 ， 但 不 起 作用 。 


10.3.8 实现 RegisterFragment 的 逻辑 


跟 RegisterActivity 中 的 逻辑 一 样 ， 单 击 Cancel 按钮 时 ， 忽 略 用 户 的 输入 ， 直 接 回 到 登录 
页 面 ; 单 击 OK 按钮 时 ， 执 行 注册 逻辑 〈 以 后 实现 ) ， 然 后 返回 登录 页 面 ， 并 且 在 登录 页 面 中 
显示 刚 注 册 的 用 户 名 和 密码 。 

首先 在 RegisterFragment 类 中 重 写 父 类 的 onViewCreated0 方 法 ， 然 后 在 其 中 添加 Cancel 
按钮 的 响应 ， 代 码 如 下 : 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) { 
super.onViewCreated(view, savedInstanceState) 


/ BURCH BEL IO HE RE 
buttonCancel.setOnClickListener( 
// JEBISS HE Activity, [HIBIE RUE 
activity!!.supportFragmentManager.popBackStack() 
/ METER HI SS HEU Fragment 


) 
注意 ，buttonCancel 变量 不 能 被 识别 ， 需 要 导入 AndroidStudio 来 产生 ( 见 图 10-10) 。 


buttonCancel.setOnClickListener{ 
Imports 


SRle niu firstcotlinapp.R id buttonCancel > 


.content register.buttonCancel » 
fragment register.buttonCancel » 


10-10 


从 图 中 可 以 看 出 ， 响 应 Cancel 按钮 的 代码 与 单 击 ActionBar 上 返回 图 标的 处 理 相同 。 
在 Cancel 按钮 的 处 理 代 码 最 后 “retum view” 这 一 句 之 前 添加 对 OK 按钮 的 响应 : 
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/ LIBI OK RAKAA 
buttonOk.setOnClickListener( 
// BERGISTEHP IEEE 
val name = editTextName.text.toString() 
val password = editTextPassword.getText().toString() 
val email = editTextEmail.text.toString() 
val phone - editTextPhone.text.toString() 
val address = editTextAddress.text.toString() 
var sex = false //Í£A/ RITZ true CRA, false fU, Bev 
/HEBOB EET PRE PHH ID 
val checkRadioId = radioGroup.checkedRadioButtonId 
LL TUR ID SETTE IELEETEETHO 1D, ME sex BUS true 
if (checkRadioId -- R.id.radioMale) ( 
sex - true 


) 


/ EAE 
//TODO: MAFI GMR SEE ESCAS 


V/M, VEL ERIBSIIIREESI Activity 办 
val mainActvity - activity as MainActivity 
mainActvity.userName = name 
mainActvity.password - password 


// FIBI E — PRU 
activity!!.supportFragmentManager.popBackStack() // MŁ PAH "Hf Fragment 
) 
在 响应 代码 中 ， 前 面部 分 跟 RegisterActivity 中 相同 ， 取 得 用 户 输入 的 值 ， 进 行 注册 ， 然 
而 注册 完成 后 的 处 理 就 不 一 样 了 ， 因 为 此 时 不 能 再 用 Intent 设置 Activity 的 返回 数据 了 。 那 么 
怎样 在 一 个 Fragment 关闭 时 把 数据 传 给 另 一 个 Fragment 呢 ? 如 果 不 考 虑 Fragment 与 Activity 
之 间 的 低 耦 合 就 很 简单 了 : 在 RegisterFragment 关闭 之 前 将 数据 保存 到 它 所 在 的 Activity 
(MainActivity) 中 ， 然 后 在 LoginFragment 被 显示 之 前 从 MainActivity 取得 数据 , 设置 到 相应 
的 控件 中 即 可 。 
在 上 面 的 代码 中 ， 我 们 取得 了 Fragment 所 在 的 MainActivity 实例 ， 然 后 把 用 户 名 和 密码 
设置 给 了 它 的 两 个 属性 userName 和 password， 所 以 要 在 MainActivity 类 中 添加 两 个 属性 : 
class MainActivity : AppCompatActivity() { 
41 RIFE AAP EMBEE 


var userName: String? = null 
var password: String? = null 


也 可 以 直接 把 用 户 名 和 密码 放 在 LoginFragment 中 ， 因 为 虽然 现在 MainActivity 中 显示 的 
是 RegisterFragment, 但 是 LoginFragment 还 存在 ,只 要 在 MainActivity 中 保存 对 LoginFragment 
的 引用 ， 就 能 在 RegisterFragment 中 访问 到 它 了 。 注 册 逻 辑 完成 。 
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10.3.9 M LoginFragment 中 读 出 用 户 名 和 密码 


当 返 回 LoginFragment 时 ， 会 重新 创建 Fragment 的 界面 ， 调 用 它 的 方法 onCreateView() 
和 onViewCreated0。onCreateView0 不 用 动 ， 我 们 可 以 在 onViewCreated0 中 把 MainActivity 的 
userName 和 password 的 值 赋 给 相应 控件 : 
//} userName Ñ password ÉTAIS THESE, RTT 
val mainActivity = activity as MainActivity 
if(mainActivity.userName != null) { 
editTextName.setText (mainActivity.userName) 


} 
if (mainActivity.password != null) { 
editTextPassword.setText (mainActivity.password) 


) 


注意 ， 在 代码 中 进行 了 判断 ， 如 果 用 户 名 和 密码 为 pul， 则 不 向 控件 赋值 ， 这 样 就 能 保证 
第 一 次 显示 LoginFragment 时 用 户 名 和 密码 输入 控件 为 空 ， 而 从 RegisterFragment 返回 时 ， 用 
户 名 和 密码 输入 控件 就 有 值 了 。 

进入 注册 页 面 ， 在 用 户 名 和 密码 控件 中 输入 文本 ， 单 击 OK 按钮 返回 ， 没 有 成 功 ， 原 因 是 
把 这 段 代码 放 在 onViewCreated0 中 是 错误 的 。 在 onViewCreated0 执 行 后 ， 在 界面 显示 出 来 之 
前 还 会 调用 一 个 方法 onViewStateRestored0。 这 个 方法 负责 恢复 控件 的 内 容 ， 如 果 不 恢 复 ， 当 
界面 被 重新 创建 出 来 时 , 用 户 原先 输入 的 内 容 就 没 了 , 就 是 它 掩盖 了 控件 死 而 复生 的 “真相 ”。 

之 所 以 在 onViewCreated0 中 向 控件 中 设置 内 容 不 起 作用 ， 就 是 因为 在 后 面 的 
onViewStateRestored() 中 又 用 原来 的 内 容 把 所 设置 的 值 履 盖 了 。 要 修正 这 个 问题 ， 也 很 简单 ， 
在 控件 内 容 被 恢复 后 再 为 控件 设置 值 即 可 。 

下 面 我 们 为 LoginFragment 重 写 onViewStateRestored0， 并 将 上 面 的 代码 放 到 里 面 : 


override fun onViewStateRestored(savedInstanceState: Bundle?) { 
super.onViewStateRestored (savedInstanceState) 


// 4 userName Ñ password PUE BUSSHEIEIURERE, MRENA EE 
val mainActivity = activity as MainActivity 
if(mainActivity.userName !- null) ( 
editTextName.text = Editable.Factory.getInstance() 
.newEditable (mainActivity.userName) 
) 
if(mainActivity.password !- null)( 
editTextPassword.text = Editable.Factory.getInstance() 
.newEditable (mainActivity.password) 
) 
} 


注意 , 要 想 让 设置 的 内 容 起 作用 , 需要 在 “super.onViewStateRestored(savedInstanceState)” 
之 后 调用 ， 因 为 恢复 控件 的 内 容 就 是 在 这 一 句 中 完成 的 。 
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10.3.10 Fragment 的 生命 周期 


生命 周期 指 的 是 一 个 对 象 从 创建 到 销毁 过 程 中 经 历 的 不 同 阶段 ,每 个 阶段 都 有 不 同 的 状态 。 
为 了 在 进入 每 个 阶段 后 能 执行 一 些 我 们 自 定义 的 逻辑 ， 父 类 中 都 提供 了 回调 方法 供 我 们 重 写 ， 
这 些 回 调 方法 叫 作 生命 周期 方法 , 之 所 以 说 它们 是 回调 ,是 因为 它们 是 由 我 们 实现 的 , 但 不 被 
我 们 调用 ， 而 是 被 系统 调用 。 

当 一 个 Fragment 被 添加 到 Activity 时 ， 要 调用 哪些 生命 周期 方法 呢 ? 以 LoginFragment 
为 例 , 在 它 被 添加 到 Activity 时 , 依次 执行 回调 方法 onAttach0 一 onCreate0 一 onCreateView0。 
其 中 , onAttach() 表 示 Fragment 被 附加 到 了 Activity E; onCreate0 表 示 Fragment 被 创建 完成 ; 
onCreateView() 表 示 要 创建 Fragment 的 界面 .与 Activity 比较 起 来 , 值得 关注 的 差别 是 : Activity 
的 onCreate0 中 需要 加 载 界面 ， 而 Fragment 必须 在 onCreateView0 中 加 载 界面 。 

TE Fragment 切换 过 程 中 会 执行 哪些 生命 周期 方法 呢 ? 在 RegisterFragment 蔡 换 
LoginFragment 的 过 程 中 ， 只 执行 了 LoginFragment 的 onDestroyViewO， 即 LoginFragment 的 
界面 被 销毁 掉 了 。 当 从 RegisterFragment 返回 到 LoginFragment 时 ，LoginFragment 的 
onCreateView0 被 重新 执行 ， 于 是 其 界面 被 重新 创建 。 

再 看 一 下 Fragment 的 销毁 过 程 , 拿 RegisterFragment 来 说 , 当 从 它 返回 LoginFragment 时 ， 
会 先 执行 它 的 onDestroyView0O， 再 执行 onDestroy0， 然 后 执行 onDetach0， 被 销毁 。 注 意 ， 
从 LoginFragment 切换 到 RegisterFragment 时 ， 我 们 将 这 个 替换 过 程 加 入 到 了 后 退 栈 中 ， 于 是 
LoginFragment 需要 保持 在 内 存 中 ， 准 备 随时 返回 到 它 的 页 面 ， 所 以 LoginFragment 并 没有 与 
Activity 分 离 。 


10.3.11 Fragment 状态 保存 与 恢复 
Fragment 生命 周期 的 回调 函数 还 有 好 多 没 讲 ， 现 在 再 讲 两 个 方法 : 


fun onViewStateRestored(savedInstanceState: Bundle?) 
fun onSaveInstanceState (outState: Bundle) 


第 一 个 前 面 已 经 接触 到 ， 因 为 涉及 Android 控件 状态 保存 与 恢复 ， 所 以 把 它们 仔细 讲解 一 
下 。 确 切 地 说 这 两 个 方法 不 属于 生命 周期 回调 方法 , 但 它们 的 确 又 参与 到 了 生命 周期 的 过 程 中 。 
onViewStateRestored0 在 onCreateView0 之 后 被 调用 , 其 作用 是 恢复 界面 销毁 前 控件 的 内 容 ( 比 
如 文本 输入 控件 的 内 容 ) ; onSavelInstanceState0 在 Fragment 被 销毁 时 调用 ， 用 于 保存 控件 中 
的 内 容 到 硬盘 中 。 它 们 两 个 相互 配合 ， 在 onSaveInstanceState0 中 保存 控件 的 内 容 ， 然 后 在 
onViewStateRestored0 中 赋 给 相应 控件 的 相应 属性 。 如 果 我 们 不 重 写 这 两 个 方法 ， 它 们 的 默认 
实现 是 对 具有 id 的 控件 进行 内 容 的 记录 和 恢复 。 如 果实 现 了 自 定义 控件 ， 可 能 就 需要 重 写 这 
两 个 方法 以 保存 自 定义 数据 。 

注意 ， 这 两 个 方法 的 调用 并 不 是 对 称 的 ， 每 次 调用 完 onCreateView0 之 后 ， 
onViewStateRestored() 一 定 会 被 调用 , 但 onSavelInstanceState() H E fE Fragment 被 系统 杀 死 时 才 
被 调用 。 
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其 实 ， 这 两 个 方法 在 Activity 中 也 有 ! 就 是 为 了 应 付 Activity 被 悄悄 杀 死 再 悄悄 复活 而 设 
立 的 (让 用 户 感 觉 不 到 界面 的 变化 )。 不论 是 Activity 还 是 Fragment， 只 要 没有 被 销毁 ， 即 使 
界面 被 销毁 了 ,其 字段 依然 存在 ,重建 界面 时 可 以 直接 把 字段 的 值 赋 给 控件 ， 所 以 不 用 保存 其 
状态 。 一 旦 被 销毁 , 重新 创建 时 要 想 恢复 之 前 界面 的 内 容 , 就 必须 在 销毁 前 把 状态 保存 下 来 ( 保 
存 到 硬盘 上 ) 。 

总 之 ，Fragment 在 onCreateView0 之 后 必然 会 调用 onViewStateRestored0， 所 以 我 们 在 
onCreateView0 中 为 控件 所 赋 的 值 在 onViewStateRestored0 中 被 覆盖 了 ， 于 是 在 LoginFragment 
中 为 控件 赋值 就 不 起 作用 了 。 


10.3.12 总结 


现在 ， 已 经 把 登录 和 注册 功能 移 到 Fragment 中 。MainActivity 的 角色 发 生 了 转变 , 成 为 页 
面容 器 ; RegisterActivity 已 不 被 使 用 , 就 删除 掉 ; 同时 MainActivity 中 的 常量 “KEY_ NAME" 
和 “KEY _ PASSWORD ”不 再 需要 在 Activity 之 间 传 递 数据 ， 就 删除 掉 。 删 除 RegisterActivity 
类 的 同时 ， 不 要 忘记 删 掉 关 联 的 资源 ， 包 括 activity register.xml 和 content_register.xml， 还 有 
values/strings.xml 中 的 这 一 条 : 


<string name="title_activity_register">RegisterActivity</string> 
还 没完 成 ， 打 开 AndroidMainifestxml， 删 掉 元 素 : 


«activity 
android:name-".RegisterActivity" 
android: label="@string/ti tle_activity_register" 
android:theme-"86style/AppTheme.NoActionBar" /> 


IE, MainActivity 的 代码 如 下 : 


class MainActivity : AppCompatActivity() { 
/ HRBEBIEEBBISLP EL RIS ES 
var userName: String? 
var password: String? 


null 
null 


VIHR, BER SACK SEEDS AR 
/ HUNE ER S TE? 
companion object( 

val REGISTER REQUEST CODE - 123 
) 


override fun onCreate(savedInstanceState: Bundle?) { 
super.onCreate (savedInstanceState) 


setContentView(R.layout.activity main) 


// BEKRA, URH Scro1lview OHNE 
window.setSoftInputMode ( 

WindowManager.LayoutParams.SOFT INPUT ADJUST PAN 

or WindowManager.LayoutParams.SOFT INPUT STATE HIDDEN) 
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//f£ ActionBar LEER Eis 
supportActionBar?.setDisplayHomeAsUpEnabled (true); 


//Él/& Fragment HR 


val fragment = LoginFragment() 


// 1838 —f: Fragment (ØR Fragment) 加 入 Activity 办 

// &l Fragment #8 

supportFragmentManager.beginTransaction() 
-add(R.id.fragment container, fragment) 
-commit() 


override fun onOptionsItemSelected(item: MenuItem?): Boolean ( 


if (item !- null && item?.itemId -- android.R.id.home)( 
if (item.itemId -- android.R.id.home) ( 
// si T ActionBar LJE PIRE 


supportFragmentManager.popBackStack() // AM EFE ul Jf fj Fragment 
return true 


) 


return true; 


) 


return super.onOptionsItemSelected (item) 


} 
LoginFragment 的 代码 如 下 : 


class LoginFragment: Fragment() ( 
override fun onCreateView( 
inflater: LayoutInflater, container: ViewGroup?, 
savedInstanceState: Bundle? 
): View? ( 
return inflater.inflate(R.layout.fragment login, container, false) 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) ( 
super.onViewCreated(view, savedInstanceState) 


// REHM nint BE 
editTextName.setHint (" 请 输入 用 户 名 ") ; 


// RERU dr TE, DE Lambda 283 
this.buttonLogin.setOnClickListener ( 


//Él& Snackbar Xf 
val snackbar - Snackbar.make (it, "你 点 我 干 喻 2"， Snackbar .LENGTH LONG); 
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// BRER 


snackbar .show (); 


11ER, AEMT 


this.buttonRegister.setOnClickListener( 


LLBBSIEBPRUT 
val fragment = RegisterFragment() 
// ZEB EIE TA FT E 


val fragmentManager = activity!!.supportFragmentManager 
fragmentManager.beginTransaction() 
-replace(R.id.fragment container, fragment) 
-addToBackStack ("login").commit() 
) 


override fun onViewStateRestored(savedInstanceState: 


Bundle?) ( 
super.onViewStateRestored(savedInstanceState) 


//} userName fill password HJARA ER, MRENA HANE 
val mainActivity = activity as MainActivity 
if(mainActivity.userName !- null) { 
editTextName.text = Editable.Factory.getInstance() 
-newEditable (mainActivity.userName) 
) 
if(mainActivity.password !- null)( 
editTextPassword.text = 
Editable.Factory.getInstance() 
.newEditable (mainActivity.password) 


) 


} 
RegisterFragment 类 的 代码 如 下 : 


class RegisterFragment : Fragment() ( 
override fun onCreateView( 
inflater: LayoutInflater, container: ViewGroup?, 
savedInstanceState: Bundle? 
): View? ( 
// Inflate the layout for this fragment 
return inflater.inflate(R.layout.fragment register, container, false) 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) ( 


super.onViewCreated(view, savedInstanceState) 
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// RRRA E dr f 
buttonCancel.setOnClickListener( 
//CBI2S BÉ Activity, PIRKE 
activity!!.supportFragmentManager.popBackStack() // MEE PRH 2$ Bf fj 
Fragment 
) 


// TE OR BEMA EHE 
buttonOk.setOnClickListener( 
V/REPR 
val name = editTextName.text.toString() 
val password = editTextPassword.getText ().toString() 
val email = editTextEmail.text.toString() 
val phone = editTextPhone.text.toString() 
val address = editTextAddress.text.toString() 
var sex = false //f4#, 我 们 次 true CRA., false AEk, BUZZ 
// BRAA IP OA P UTERE 1D 
val checkRadioId - radioGroup.checkedRadioButtonId 
// AURA 1D SEFÍICREBI EUER ID, WIE sex BUS true 
if (checkRadioId -- R.id.radioMale) ( 
sex = true 


) 


/HERT 
//TODO: MIFIT ARBEIT REA E 


11ÈM, HAP EMEERF Activity 办 
val mainActvity = activity as MainActivity 
mainActvity.userName = name 
mainActvity.password = password 


// BARE — JT 
activity!!.supportFragmentManager.popBackStack() 
/ LMEEIF EUIS Fragment 


10.4 对话 杠 


我 们 经 常 看 到 某 些 App 的 主页 面 上 按 下 返回 键 时 会 出 现 对 话 框 ,询问 我 们 是 否 真 的 退出 。 
实现 这 个 功能 的 原理 很 简单 : 响应 返回 键 , 在 其 中 显示 对 话 框 , 对 话 杠 上 有 “退出 ”“ 取 消 ” 
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之 类 的 按钮 ， 单 击 “ 退 出 ”按钮 时 finish0 当 前 Activity， 单 击 “ 取 消 ” 时 啥 也 不 做 。 问 题 是 ， 
如 何 显示 对 话 框 呢 ? 答案 是 使 用 DialogFragment 类 。 

DialogFragment 是 一 个 Fragment， 必 须 依 附 Activity 而 起 作用 。 要 使 用 它 ， 必 须 从 它 派生 
一 个 子 类 , 在 子 类 中 重 写 onCreateDialog0 方 法 , 在 此 方法 中 创建 真正 的 Dialog 对 象 。 实际 上 ， 
DialogFragment 是 Dialog 的 一 个 容器 ， 我 们 看 到 的 对 话 框 是 Dialog 提供 的 ， 而 Dialog 通过 依 
附 在 Fragment 中 来 自动 配合 Activity 的 生命 周期 。 下 面 就 创建 一 个 询问 是 否 退 出 的 对 话 框 。 


10.4.1 创建 子 类 


从 DialogFragment 派生 一 个 子 类 ， 把 这 个 类 作为 MainActivity 的 内 部 类 。 在 MainActivity 
类 中 添加 以 下 代码 : 


class ExitDialogFragment() : DialogFragment() { 
[LH BSTERISUE, WTE PÆ Dialog XHSUFIEET 
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog { 
// Use the Builder class for convenient dialog construction 
val builder = AlertDialog.Builder(activity!!) 
/ / EEIE, WE — LENI EMA BERG 
// BEREE PERENE 
builder.setMessage(R.string.exit or not) 
/ LBS EP ES ER HUUR RHE, HIST OK. YES Z2SIOTEET 
-setPositiveButton (android.R.string.ok,DialogInterface.OnClickLi 
stener ( dialog, id -> 
/ ABI AIÁ Activity 
activity!!.finish() 
n 
/ LUBUGA EE T HUR RE E, HA FRR 
.setNegativeButton (android.R.string.cancel, 
DialogInterface.OnClickListener { dialog, id -> 
V/A Ei TRHA, fFAUNT 
}) 
// Bl RE E EH ERTE 


return builder.create() 


i 


这 一 段 代码 定义 了 DialogFragment 的 子 类 ， 并 重 写 父 类 的 方法 onCreateDialog0， 在 此 方 
法 中 创建 了 Dialog 的 子 类 AlertDialog 的 一 个 实例 并 返回 。 在 编写 这 段 代码 时 ， 可 能 需要 导入 
多 个 类 ， 注 意 有 些 类 在 不 同 的 包 中 都 存在 。 比 如 类 DialogFragment 有 多 种 选择 ， 如 图 10-11 
所 示 。 


class ExitDialogFragment grragment() 1 
{1E 


10-11 
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注意 , 选择 带 有 “support” 的 包 , 因为 我 们 使 用 的 Activity 就 是 support 库 中 的 , 如 图 10-12 
所 示 。 


import android.support.v7.app.AppCompatActivity 
import android.view.MenuItem 
import android.view.WindowManager 


class MainActivity : AppCompatactivity() ( 


10-12 
10.4.2 ”显示 对 话 框 
要 显示 对 话 框 很 简单 ， 即 创建 DialogFragment 对 象 ， 调 用 show0 方 法 ， 代 码 如 下 : 


val dialogFragment = ExitDialogFragment() 
dialogFragment.show(supportFragmentManager, "exit") 


我 们 希望 在 主页 面 中 单 击 返 回 键 时 执行 这 段 代 码 。 我 们 已 经 在 MainActivity 中 响应 了 返回 
键 ， 当 前 的 逻辑 是 从 后 退 栈 中 弹出 上 一 个 Fragment， 当 然 这 只 有 在 处 于 RegisterFragment 页 面 
时 起 作用 ， 在 LoginFragment 页 面 时 不 起 作用 。 在 处 于 LoginFragment 页 面 时 ， 应 显示 出 对 话 
JE, 询问 用 户 是 否 退出 。 我们 首先 要 确定 当前 页 面 是 不 是 LoginFragment， 可 以 为 MainActivity 
添加 一 个 字段 ， 在 页 面 切换 时 用 它 记 录 下 当前 是 哪个 页 面 处 于 显示 状态 CE Fragment 的 
onCreateView() 方 法 中 设置 这 个 字段 的 值 ) ， 这 种 方法 可 以 做 到 万 无 一 失 ， 但 是 封装 性 不 佳 。 
还 有 更 简单 一 点 的 做 法 : 查看 当前 后 退 栈 中 是 否 有 条 目 ， 如 果 没 有 ,就 说 明 退 回 到 了 最 初 的 页 
面 (LoginFragment) ， 应 该 显示 询问 是 否 退出 的 对 话 框 。 

修改 MainActivity 的 onOptionsItemSelected() // 13: 4I F : 


override fun onOptionsItemSelected(item: MenuItem?): Boolean ( 
if (item?.itemId -- android.R.id.home) ( 
// Ži f ActionBar Lf [FIBER 
if (supportFragmentManager.backStackEntryCount === 0) ( 
/LLADRUEABEESS D, MiA) TRUR, TIB HERI TEE 
val dialogFragment = ExitDialogFragment () 
dialogFragment.show(supportFragmentManager, "exit") 
) else { 
/ LM BAR EEUU RÝ Fragment 
supportFragmentManager.popBackStack() 
) 
// ARR ABIE] true 
return true 
) 
return super.onOptionsItemSelected (item) 


} 
运行 App， 在 登录 页 面 单 击 AppBar 上 的 返回 图 标 ， 会 出 现 如 图 10-13 所 示 的 对 话 框 。 
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你 真 的 要 退出 吗 ?再 考虑 一 小 时 好 吗 ? 


取消 确定 


图 10-13 
10.4.3 ”响应 返回 键 


对 按键 的 响应 ， 是 在 Activity 中 设置 的 。Activity 类 中 已 实现 了 方法 onKeyDownQ, Xf 
的 按 下 操作 进行 了 默认 处 理 。 我 们 要 响应 按键 实现 自己 的 处 理 ， 就 需要 重 写 此 方法 ， 判 断 当前 
页 面 是 不 是 登录 页 面 : 如 果 是 ， 就 弹出 退出 提示 对 话 框 ; 否则 ， 按 默认 方式 处 理 。 如 何 按 默 认 
方式 处 理 呢 ? 调用 父 类 的 实现 即 可 ， 代 码 如 下 : 
override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean ( 
if (supportFragmentManager.backStackEntryCount --- 0) ( 
/LLADRUEABEESS T. MAAF THIRD, MFB HERI ATE 
val dialogFragment = ExitDialogFragment() 
dialogFragment.show(supportFragmentManager, "exit") 
return true 
) else ( 
LH TTIRAAISIRTE 


return super.onKeyDown(keyCode, event) 


) 
完成 收工 ! 
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Android App 中 的 菜单 如 图 11-1 所 示 。 单 击 箭头 所 指 的 三 个 点 ， 


Messenger 


才 出 现 菜 单 ( 见 图 11-2) 。 


Archived 


Messenger 


"s dus 
a Blocked contacts 


Settings 


Help & feedback 


图 11-1 图 11-2 
在 前 面 的 章节 中 ， 为 响应 Action Bar 上 后 退 图 标的 单 1 saisi 重 写 了 Activity 的 方法 
ns 这 个 方法 就 是 用 于 响应 菜单 项 选择 的 , 也 就 是 说 Action Bar 上 的 后 退 
图 标 其 实 是 被 当 作 菜 单项 来 处 理 的 。 但 是 , 实现 了 这 个 方 aiian 现 ， 只 是 用 于 响应 
选择 ， 实 现 Activity 的 另 一 个 方法 E 菜单 显示 出 来 。 需 要 显 
才 ， 它 会 被 系统 调用 ， 必 须 在 这 个 方法 中 创建 菜单 。 注 意 ， 不 是 我 们 去 响应 单 击 事件 把 
时 显示 出 来 ,而 是 让 系统 去 做 ,我 们 要 做 的 是 编写 出 创建 菜单 的 逻辑 。 也 就 是 说 ,显示 什么 


样 的 菜单 由 我 们 决定 ,而 
显示 实现 onOption 


下 面 我 们 首先 实现 or 
就 是 要 显示 的 菜单 ， 我 介 
用 代码 创建 菜单 项 , 即 创 


p 


可 时 把 菜单 显示 出 来 由 系统 决定 .总 之 ， 

temSelected0， 啊 启 先 择 。 

nCreateOptionsMenu() 方 法 。 这 个 方法 有 一 个 参数 “menu:Menu”, 它 

创建 出 菜单 项 之 后 ,要 把 菜单 项 添加 到 这 个 菜单 中 。 虽然 我 们 可 以 使 
就 是 添加 一 个 菜单 资源 


ËX Menultem 的 实例 , 但 是 有 更 好 的 办 法 ， 


: 现 onCreateOptionsMenu()， 


NS; 


在 资源 中 添加 菜单 项 ， 可 


视 化 地 设计 菜单 。 


添加 菜单 资源 


在 app 组 上 
创建 资源 对 活 杠 ( 见 图 1 


右 击 弹出 快捷 菜单 〈 见 图 11-3) ， 


P 


选择 “Android Resource File" áp, HIL 


1-4) 。 
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Link C++ Project with Gradle 


1 
» 
> 
> 
> 


Copy 


11-3 


Eile name: main 


Resource type: 


[Men 和 和 
Root element: 
Souceset [main 


Directory name: menu 


图 11-4 


在 “File name” 中 填 “main”， 这 是 资 
源 文件 的 名 字 ， 可 以 修改 ，“Resource type 
(资源 类 型 ) ”这 一 项 必须 选 Menu, HR 
项 照 图 设置 即 可 ， 单 击 OK 按钮 ， 菜 单 资 源 
被 添加 , 如 图 11-5 所 示 。 打开 main.xml 文件 
就 可 以 看 到 菜单 设计 界面 ( 见 图 11-6) 。 


> B drawable 
> B layout 


v B menu 


dim main.xml 


图 11-5 图 11-6 


组 件 树 中 默认 已 经 有 了 一 个 menu， 代 表 一 个 菜单 ， 我 们 需要 做 的 就 是 向 它 里 面 添加 菜单 
项 。 拖 一 个 “Menu Item” 到 menu P AR 11-7) 。 注 意 ， 不 要 往 预览 图 中 拖 ， 拖 不 进去 ， 
往 组 件 树 里 拖 。 


S Cast Button. 
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添加 菜单 项 之 后 ， 可 以 选中 它 ， 在 属性 编辑 器 中 进行 编辑 〈 见 图 11-8). 。 


Yitem 
id 


title 设置 
icon 


showAsAction 


visible 可 
enabled m) 
checkable L] 


11-8 
必须 为 菜单 项 设置 id, 这 样 才 能 在 响应 菜单 选择 时 区 分 是 哪个 菜单 
项 被 选中 。title 也 要 设置 正确 的 值 。icon 是 菜单 项 的 图 标 ， 可 以 为 它 设 mua 
置 一 个 drawable Vti. showAsAction 表示 是 否 将 这 个 菜单 项 放 到 ifRoom 


ActionBar 上 , 如果 一 个 菜单 项 显示 在 ActionBar 上 , 就 不 再 在 菜单 中 显 “| C 
示 了 ， 其 值 有 图 11-9 所 示 的 几 个 选项 ， 含 义 如 下 : collapseActionView 


* never 表示 永远 不 ， 这 是 默认 值 。 
* ifRoom 表示 AppBar 只 要 有 控件 ， 就 放 到 AppBar 上 。 
* always 表示 永远 放 在 App Bar 上 ， 不 管 有 没有 控件 。 
。 withText 表示 菜单 项 的 文本 与 图 标 一 起 显示 。 

* collapseActionView 表示 菜单 项 如 果 是 一 个 复杂 控件 ， 就 把 这 个 控件 收缩 起 来 。 


res/menu/main.xml 这 个 文件 的 内 容 如 下 : 


«?xml version-"1.0" encoding="utf-8"?> 
«menu xmlns:android-"http://schemas.android.com/apk/res/android"^ 
<item 
android:id="@+id/. action settings" 
android:title=" 设 置 " /> 
</menu> 


下 一 步 要 把 菜单 创建 出 来 。 


图 11-9 


1 1 .2 重 写 onCreateOptionsMenu() 


在 MainActivity 中 ， 重 写 方 法 onCreateOptionsMenu()， 代 码 如 下 请 仔细 看 注释 〉: 


override fun onCreateOptionsMenu (menu: Menu?): Boolean { 
/LLAGEIRÜIEESER, EA menu APENE HKR EUR EI menu 办 


menuInflater.inflate(R.menu.main, menu) 
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//E BI true, JE BE BEA, BUTER 


return true 


运行 App( 见 图 11-10) ， 单 击 图 标 即 可 出 现 菜单 〈 见 图 11-11) o 


图 11-10 图 11-11 


11.9 mm 


嵌 套 菜单 指 的 是 某 个 菜单 项 对 应 的 是 一 个 子 菜单 〈 见 图 11-020 。“ 子 菜单 ”这 个 菜单 项 
右边 有 个 小 箭头 ,表示 其 下 有 子 菜单 项 。 单 击 “ 子 菜单 ”这 一 项 后 ， 出 现 属于 这 个 菜单 项 的 所 
有 子 菜单 项 〈 见 图 11-13) 。 这 个 子 菜单 中 只 有 一 项 ， 灰 色 的 字 就 是 这 个 子 菜单 的 名 字 。 如 何 
显示 这 样 的 子 菜 单 呢 ? 下 面 来 演示 一 下 。 


子 菜单 
子 菜单 项 
11-12 图 11-13 


首先 添加 一 个 菜单 项 , 将 其 Title 设置 为 字符 串 “ 子 菜单 ”, 其 id 并 不 重要 ( 见 图 11-14)。 
然后 拖 一 个 “Menu” 放 到 这 个 新 加 菜单 项 的 下 面 , 并 让 它 成 为 这 个 菜单 项 的 子 项 ( 见 图 11-15)。 

注意 ， 新 加 的 这 个 menu 不 是 一 个 菜单 项 ， 而 是 一 个 菜单 。 菜 单 中 可 以 包含 菜单 项 ， 所 以 
可 以 向 它 里 面 添加 菜单 项 ， 拖 一 个 菜单 项 给 它 〈 见 图 11-16) 。 
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CIEN 


S Cast Button 
{= Menu Item 
SI Cast Button 
" Q Search Item 


Palette 


«9 Switch Item 


图 11-16 


将 这 个 菜单 项 的 id 设置 为 “action submenu item" ~ title 设置 为 “ 子 菜单 项 ”。 


10.2. 菜单 项 分 组 


菜单 项 分 组 主要 用 于 在 菜单 中 模拟 单 选 按钮 和 多 选 按钮 的 效果 , 比如 把 多 个 菜单 项 加 入 同 
一 个 组 ， 通 过 设置 这 个 组 的 属性 “checkableBehavior”， 可 以 将 组 内 菜单 项 设置 成 单 选 按钮 的 


行为 ， 也 可 以 设置 成 多 选 按钮 的 行为 ， 如 图 11-17 所 示 。 


11-17 


由 于 不 常用 ， 因 此 就 不 详细 讲解 了 ， 读 者 可 自行 上 网 搜索 学 习 。 
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了 1 ”响应 菜单 项 


前 面 讲 过 ， 响 应 菜单 项 应 该 在 方法 onOptionsItemSelected0 中 。 我 们 已 经 在 MainActivity 
类 中 实现 了 它 , 现在 要 做 的 是 在 其 中 添加 对 新 增加 的 菜单 项 的 响应 , 代码 如 下 ( 粗 体 部 分 为 新 
添加 的 代码 ) : 


override fun onOptionsItemSelected(item: MenuItem?): Boolean ( 
if (item?.itemId == android.R.id.home) ( 

//fÉi f Action Bar Ein 

if (supportFragmentManager.backStackEntryCount --- 0) ( 
V14 RITBRET, Mik AEFT RURA, FIB HERI AE 
val dialogFragment = ExitDialogFragment () 
dialogFragment.show(supportFragmentManager, "exit") 

) else { 
// MAITB PRH S THIS Fragment 
supportFragmentManager.popBackStack() 


) 
/LLAAEERT UAE H ATE IRI true 
return true 
Jelse if(item?.itemId == R.id.action settings)( 
[HET EBGUBL BR- RERE 
Snackbar .make (findViewById(R.id.fragment container), 
"你 选 了 设置 "， 
Snackbar.LENGTH LONG).show(); 
}else if(item?.itemId == R.id.action submenu item)( 
LH T TAUB REUTERS SEIS 
Snackbar .make (findViewById(R.id.fragment container), 
"你 选 了 子 菜单 项 "， 
Snackbar.LENGTH LONG).show(); 
) 
return super.onOptionsItemSelected (item) 


} 

在 方法 中 增加 了 对 “设置 ”菜单 项 和 “ 子 菜单 ”菜单 项 的 判断 和 处 理 ,判断 方式 是 通过 菜 
单项 id 进行 比较 。 对 它们 的 响应 是 简单 地 显示 提示 信息 。 

显示 提示 信息 用 了 Snackbar 类 ,调用 Snackbar 的 静态 方法 makeO 创 建 一 个 Snackbar 对 象 。 
向 make0 传 入 三 个 参数 : 第 一 个 是 一 个 View， 提 示 信 息 就 显示 在 它 或 它 的 某 个 长 辈 上 面 ; 第 二 个 
参数 是 信息 内 容 ; 第 三 个 参数 是 信息 显示 的 时 间 , 我 们 传 入 的 是 “LENGTH LONG" (长 时 间 显 
ZO 。 之 后 调用 Snackbar 对 象 的 方法 show0 把 提示 信息 显示 出 来 。 

选择 “设置 ”菜单 项 时 ，Snackbar 便 出 现 。 它 是 出 现在 底部 的 一 个 长 条 〈 见 图 11-18) ， 
过 一 段 时 间 就 会 自动 消失 。 
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Snackbar 显示 时 所 在 的 控件 并 不 一 定 是 make() 的 第 
一 个 参数 传 入 的 View: make() 方 法 内 部 会 查看 传 入 
的 View 是 否 合适 ， 如 果 传 入 的 是 一 个 很 小 的 按钮 ， 
那么 在 它 上 面 是 不 可 能 显示 一 个 长 条 的 ,接着 查看 按 
钮 的 父 控件 , 如果 父 控件 不 合适 再 查看 父 控件 的 父 控 
件 ， 那 么 就 找到 一 个 合适 的 View 并 显示 在 上 面 。 


图 11-18 


Snackbar 取代 了 传统 的 显示 提示 类 Toast。 然而 Snackbar 也 不 是 Android SDK 核心 库 中 的 
类 ， 而 是 Design 库 中 的 ， 所 以 要 添加 对 Design 库 的 依赖 “com.android.support:support-v4: 
Version'”。 现 在 的 依赖 项 如 下 : 


dependencies ( 

implementation fileTree(include: ['*.jar'], dir: 'libs') 

implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin version" 

implementation 'com.android.support:appcompat-v7:28.0.0"' 

implementation 'com.android.support.constraint:constraint-layout:1.1.3' 

implementation 'com.android.support:support-v4:28.0.0' 

testImplementation 'junit:junit:4.12' 

androidTestImplementation 'com.android.support.test:runner:1.0.2' 

androidTestImplementation 'com.android.support.test.espresso: 
espresso-core:3.0.2' 

implementation 'com.android.support:design:28.0.0' 


) 


注意 (版 本 号 28.0.0 ， 应 该 会 更 新 ， 不 可 随意 填 ， 要 参考 那些 自动 添加 的 Support 库 的 
版 本 ， 与 它们 一 样 就 没有 问题 。 


其 他 菜单 类 型 


我 们 正在 讲 的 菜单 有 个 名 字 ， 叫 作 “options GAWD 菜单 ”。 其 实 ， 还 有 两 种 不 同 的 菜 
JR; 一 种 叫 “Context (上 下 文 ) 菜单 ”， 一 种 叫 “Popup GAH) 菜单 ”。 

在 一 个 电 商 App 中 ， 用 鼠标 在 一 条 商品 上 长 按 ， 可 能 会 出 现 菜单 ， 这 个 菜单 就 是 上 下 文 
菜单 。 要 想 把 它 显示 出 来 ， 必 须 设置 目标 控件 支持 上 下 文 菜单 ， 然 后 还 要 重 写 Activity 中 有 关 
的 回调 方法 ， 思 路 跟 选 项 菜单 差不多 。 

选项 菜单 和 上 下 文 菜单 有 一 个 共同 点 , 就 是 我 们 不 能 主动 把 它们 呈现 出 来 。 它们 如 何 出 现 
我 们 决定 不 了 , 我 们 只 能 决定 显示 什么 样 的 菜单 。 弹 出 菜单 就 不 一 样 了 , 我 们 可 以 决定 它 如 何 
显示 ， 因 为 它 的 呈现 是 我 们 调用 相应 的 方法 造成 的 。 这 些 菜单 不 常用 ， 所 以 就 不 细 讲 了 。 
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动画 是 提高 视觉 感受 的 有 力 手段 ， 所 以 必须 学 会 Android 动画 ! 


12.1 动画 原理 


在 所 有 系统 或 开发 库 中 , 动画 实现 的 原理 都 一 样 , 即 重复 每 隔 一 段 时 间 改 变 一 下 界面 这 个 
动作 。 当 间隔 时 间 很 短 时 ， 比 如 30 毫秒 改变 一 次 ， 那 么 人 就 会 感觉 到 界面 动 起 来 了 。 间 隔 时 
间 越 得， 动画 就 越 顺 滑 自然 。 

知道 了 这 个 原理 ， 我 们 就 可 以 用 定时 器 来 实现 动画 了 。 定 时 器 在 各 种 系统 中 都 存在 ， 既 可 
以 设 定 在 某 个 时 间 点 执行 一 次 某 种 动作 ; 也 可 以 设置 从 现在 开始 计时 , 多 长 时 间 之 后 执行 某 种 
动作 ;还 可 以 设置 每 间隔 一 段 时间 反 复 执行 某 种 动作 。 

对 应 定时 器 的 类 叫 Timer。 使 用 定时 器 时 ， 要 告诉 Timer 对 象 执行 什么 动作 〈 代 码 ) 、 间 
隔 多 长 时 间 执行 、 是 否 重复 等 信息 。 

下 面 是 启动 一 个 定时 器 的 代码 示例 ， 运 行程 序 ，10 毫秒 后 开始 执行 一 个 动作 ， 然 后 每 隔 
30 毫秒 重复 这 个 动作 : 

// 开 记 害 1 各 

/ / ENEP EREI R 

val timer = Timer () 

//Él& —^ TimerTask HR, BKITDBRA OE E HT 

val timerTask - object: TimerTask() ( 

override fun run() ( 
11ER PREHITI 
// RZ BERT I] 
val date = Date () 
Log.i("timetest", date.toString()) 


) 


V/B PERE 


timer.schedule(timerTask, 10, 30) 


这 个 定时 器 执行 的 动作 就 是 在 日 志 中 输出 当前 的 时 间 。 这 段 代 码 放 在 哪里 都 行 , 这 里 放 在 
了 MainActivity 的 onCreate() 方 法 中 ， 这 样 App 一 启动 时 就 开始 执行 ， 如 图 12-1 所 示 。 


com.example.niufirstcotl v | Verbose V| Qr timetest 


20571-20611/com.example.niu.tirstcotlinapp I/timetest: Wed Jan 02 19:50:10 GMT«08:00 2019 
20571-20611/com.example.niu.firstcotlinapp I/timetest: Wed Jan 02 19:50:10 GMT408:00 2019 
20571-20611/com.example.niu.firstcotlinapp I/timetest: Wed Jan 02 19:50:10 GMT«08:00 2019 
20571-20611/com.example.niu.firstcotlinapp I/timetest: Wed Jan 02 19:50:10 GMT408:00 2019 
20571-20611/com.example.niu.firstcotlinapp I/timetest: Wed Jan 02 19:50:10 GMT408:00 2019 
20571-20611/com.example.niu.firstcotlinapp I/timetest: Wed Jan 02 19:50:10 GMT408:00 2019 
20571-20611/com.example.niu.firstcotlinapp I/timetest: Wed Jan 02 19:50:11 GMT408:00 2019 
20571-20611/com.example.niu.firstcotlinapp I/timetest: Wed Jan 02 19:50:11 GMT408:00 2019 


图 12-1 


如 果 把 输出 日 志 的 代码 改 为 改变 一 个 控件 位 置 的 代码 , 就 会 让 这 个 控件 动 起 来 了 。 由 于 涉 
及 多 线程 ， 而 现在 又 没 讲 多 线程 ， 因 此 就 不 演示 此 功能 了 。 但 是 我 们 可 以 借 此 先 研 究 一 下 创建 
一 个 动画 所 需要 的 数据 ， 现 把 要 考虑 的 各 方面 罗列 如 下 : 


动 谁 ? 

动 哪里 ?比如 位 置 、 角 度 、 缩 放 *…… 

动 多 长 时 间 ? 

动 一 下 还 是 重复 动 ? 重复 动 的 话 ， 一 次 执行 完 ， 下 一 次 是 否 需要 反 向 动 ? 还 有 ,重复 多 少 次 ? 
怎么 动 法 ? 匀速 、 先 快 后 慢 还 是 …… 


记 住 上 面 这 些 动画 相关 的 要 素 ， 就 容易 理解 动画 API 的 使 用 了 。 


-.— 三 种 动画 


Android 中 提供 了 三 种 动画 : View (视图) 动画 、Property (属性 ) 动画 和 Drawable 动画 。 
View 动画 是 Android 早期 就 出 现 的 、 现 在 依然 可 用 的 传统 创建 动画 的 方式 。Property 动画 是 新 
出 现 的 方式 。Android 希望 我 们 尽量 使 用 Property 动画 ， 但 是 View 动画 也 不 会 被 废弃 ， 因 为 
在 某 些 情 况 下 只 能 使 用 View 动画 。Drawable 动画 是 对 多 个 Drawable 对 象 进行 切换 ， 跟 放电 
影 一 样 ， 没 有 前 面 两 种 复杂 ， 一 般 用 不 到 ， 可 自行 研究 。 


Layout 动画 或 转 场 动画 等 都 是 利用 View 动画 或 Property 动画 为 某 种 过 程 提供 了 动画 效果 ， 它 
们 与 View 动画 和 Property 动画 不 是 一 个 层次 的 概念 。 
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12.3 视图 动画 


在 登录 页 面 中 ， 有 一 个 头像 ， 我 们 让 它 转 起 来 。 首 先 


设置 一 个 有 意义 的 id。 打开 文件 tes/fragment login xml, 在 o ERE 
界面 设计 器 中 设置 头像 控件 的 属性 ， 如 图 12-2 所 示 。 RE |ia A oo 
就 可 以 进行 设置 了 ， 代 码 如 下 : ejut heh onto 

// ül& — PREREZE (HAE? DARE 

val animation = RotateAnimation(0.0f, 360f) 

// BLEU, REVERSE ÉL ECEUBE ZI); — OE RKRIID OMJER) 

animation.repeatMode = Animation.REVERSE 

// BERZH, 1000 EÉ ( 动 多 KWY 间 ) 

animation.duration = 1000 

//LEBB EY 

animation.repeatCount = 10 

/ I ESIAIIBI (Zhi? 2] imageView) 

imageViewHead.startAnimation (animation) 

这 段 代 码 创建 了 一 个 旋转 动画 ， 然 后 应 用 到 图 像 控 件 上 ， 让 图 像 控 件 转 起 来 。 

把 这 段 代 码 放 到 哪里 呢 ? 肯定 是 LoginFragment 类 中 ， 那 具体 放 到 哪个 方法 中 呢 ? 放 到 
onCreateView() 中 不 合适 ， 因 为 onCreateView0 中 只 是 加 载 控 件 ， 还 没有 把 根 控件 放 到 Activity 
容器 中 〈 即 FragmentLayout， 见 activity_ main.xml) ， 所 以 动画 不 能 起 作用 。 我 们 临时 把 它 放 
到 响应 登录 按钮 的 方法 中 ， 就 是 为 了 看 看 动画 效果 : 

/L LBEBORTCHIBIE H, U Lambda 29386 


this.buttonLogin.setOnClickListener ( 


// 8l& Snackbar X/$& 
val snackbar = Snackbar.make (it, "你 点 我 干 喻 ?2"，Snackbar .LENGTH LONG); 
// BRET 


snackbar .show () ; 


// 8g PRERE DBE SIRO 

val animation = RotateAnimation(0.0f, 360f) 

// EELEXIBESU, REVERSE HRBET -ARAR OMJER) 
animation.repeatMode = Animation.REVERSE 

// EBEAFAERTIEI, 1000 EP (GEEH 

animation.duration = 1000 

// REGE 

animation.repeatCount = 10 

// R (SIE? 3j inageView) 


imageViewHead.startAnimation (animation) 
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运行 程序 , 单 击 一 下 登录 按钮 ,就 会 发 现 除了 显示 一 条 提示 信息 外 头像 也 动 了 起 来 ( 见 图 
12-3) 。 


é 登录 e 登录 é 登录 
请 输入 用 户 名 请 输入 用 户 名 请 输入 用 户 名 
图 12-3 


以 图 像 的 左上 角 为 轴 心 进行 旋转 ， 转 完 一 圈 (60 HE) 后 不 再 继续 转 ， 而 是 反 向 转 半 轿 。 
一 般 都 不 会 这 样 转 ， 都 是 以 图 像 中 心 点 为 轴 进 行 旋转 。 


12.3.1 绕 着 中 心 转 


我 们 再 改 一 下 动画 对 象 的 创建 方式 , 即 调用 另 一 个 构造 方法 。 当 前 的 构造 方法 有 两 个 参数 ， 
第 一 个 是 动画 开始 角度 ， 第 二 个 是 动画 结 结束 角度 。 我 们 将 其 改 为 下 面 这 样 : 

val animation = RotateAnimation(0.0f, 180f, Animation.RELATIVE TO SELF, 0.5f, 
Animation.RELATIVE TO SELF, 0.5f) 

这 个 构造 方法 增加 了 四 个 参数 : 第 四 个 参数 是 旋转 轴 心 在 X 坐标 上 的 位 置 ， 第 三 个 参数 
是 第 四 个 参数 的 类 型 ， 我 们 传 入 的 是 “relative to self (相对 于 自己 )”， 即 这 个 轴 心 的 义 坐标 
是 相对 于 图 像 自己 来 说 的 ，0 表示 最 左边 ，! 表示 最 右边 ，0.5 就 是 中 心 ; 后 两 个 参数 跟 这 两 个 
一 致 ， 只 是 表示 的 是 Y 坐标 。 

运行 App， 是 不 是 正常 转 了 ? 注意 ， 这 次 把 旋转 角度 改 成 了 0 到 180 度 。 仔 细 观 察 的 话 ， 
就 会 发 现 每 次 旋转 都 是 从 慢 到 快 再 到 慢 ， 而 不 是 匀速 。 决 定 这 种 行为 的 是 插值 函数 ， 利 用 它 可 
以 做 出 各 种 有 意思 的 行为 。 


12.3.2 不 要 反 向 转 


动画 设置 中 的 “animation.setRepeatMode(Animation.REVERSE);” 用 于 设置 重复 模式 ， 其 
中 reverse 是 反 向 的 意思 ， 如 果 不 要 反 向 ， 可 以 把 这 句 话 去 掉 。 怎 么 改 才能 变 成 沿 同一 方向 不 
停 地 转 呢 ? 简单 ， 把 旋转 角度 改 为 0 到 360 度 : 
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val animation = RotateAnimation(0.0f, 360f, Animation.RELATIVE TO SELF, 0.5f, 
Animation.RELATIVE TO SELF, 0.5f) 


此 时 可 以 连续 沿 同一 方向 转 了 , 但 是 存在 先 慢 再 快 再 慢 的 行为 , 两 次 动画 之 间 还 是 有 明显 
的 停顿 。 要 解决 这 个 问题 ， 我 们 只 要 把 旋转 速度 改 为 匀速 即 可 。 改 变 方式 很 简单 ， 增 加 下 面 一 
名 调用: 


animation.setInterpolator (LinearInterpolator()) 


Interpolator 是 插值 的 意思 ，Linear 是 线性 的 意思 。 我 们 创建 动画 时 只 指定 了 开始 值 和 结束 
值 ， 根 据 前 面 讲 的 原理 ， 每 隔 一 段 很 短 的 时 间 就 需要 重新 画 控件 ， 画 控件 时 要 得 到 它 当前 的 旋 
转角 度 ， 这 个 角度 需要 根据 开始 值 和 结束 值 以 及 当前 播放 时 间 占 总 动画 时 间 的 比率 计算 出 来 ， 
那么 如 何 计 算 呢 ? 如 果 是 匀速 动 就 比较 容易 了 , 只 需 用 当前 时 间 与 总 时 间 的 比率 乘 上 总 旋转 角 
度 就 计算 出 来 了 ,这 种 勾 速算 法 叫 作 线性 插值 。 默认 不 是 匀速 ,而 是 先 慢 后 快 再 慢 ， 所 以 需要 
用 一 个 正弦 函数 来 计算 插值 。 总 之 ， 它 们 叫 作 插 值 函 数 ， 就 是 来 帮助 计算 中 间 值 的 。 

以 下 是 其 他 类 型 的 插值 函数 〈 可 以 试 试 它们 ， 可 能 会 出 现 很 有 意思 的 效果 ) : 


AccelerateDecelerateInterpolator: 在 动画 开始 与 结束 的 地 方 速率 改变 比较 慢 ， 在 中 间 的 时 候 
加 速 。 

AccelerateInterpolator: 在 动画 开始 的 地 方 速率 改变 比较 慢 ， 然 后 开始 加 速 。 
AnticipateInterpolator: 开始 的 时 候 向 后 ， 然 后 向 前 甩 。 

AnticipateOvershootInterpolator: 开始 的 时 候 向 后 ， 然 后 向 前 甩 一 定 值 后 返回 最 后 的 值 。 
BounceInterpolator: 动画 结束 的 时 候 弹 起 。 

CycleInterpolator: 动画 循环 播放 特定 的 次 数 ， 速 率 改 变 沿 着 正弦 曲线 。 
DecelerateInterpolator: 在 动画 开始 的 地 方 快 ， 然 后 慢 。 

LinearInterpolator: 以 常量 速率 改变 。 

OvershootInterpolator: 向 前 忆 一 定 值 后 再 回 到 原来 位 置 。 


123.3 ”举一反三 
下 面 简单 列举 一 下 其 他 类 型 的 动画 。 
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移动 位 置 (TranslateAnimation) : 

€ 在 创建 动画 对 象 时 应 该 就 指定 开始 位 置 和 结束 位 置 。 

* 重复 模式 指定 为 反 向 时 应 该 移 到 结束 位 置 后 再 反 向 移 回 来 。 

e 默认 动 法 应 是 先 慢 后 快 再 慢 。 

€ 设置 为 线性 插值 后 应 是 飞速 移动 。 

缩放 (ScaleAnimation) : 

* 在 创建 动画 对 象 时 应 该 指定 开始 缩放 比例 和 结束 缩放 比例 。 

* 还 可 以 指定 仅 在 义 轴 上 动 ( 宽 窜 变 化 ) 或 仅 在 Y 轴 上 动 (高 矮 变化 ) 或 XY 轴 同 时 动 。 
* 在 重复 模式 指定 为 反 向 时 会 从 大 到 小 ， 再 从 小 到 大 来 回 变 。 

e 默认 动 法 应 是 先 慢 后 快 再 慢 。 


€ 设置 为 线性 插值 后 应 是 匀速 变 大 变 小 。 
e 改变 透明 度 CAlphaAnimation) : 
* 在 创建 动画 对 象 时 需要 指定 透明 度 的 开始 值 和 结束 值 。 
t 重复 模式 指定 为 反 向 时 ， 会 在 消失 和 显现 之 间 来 回 变化 。 
e 隐现 过 程 也 可 以 通过 插值 函数 控制 其 速度 变化 曲线 ， 但 似乎 人 眼 感觉 不 出 差别 。 


12.3.4 动画 组 


有 时 可 能 需要 多 个 动画 同时 播放 , 但 又 想 对 这 些 动画 进行 统一 控制 ,比如 所 有 动画 都 用 同 
一 个 插值 函数 、 所 有 动画 都 延迟 一 段 时 间 执 行 等 ， 这 时 就 要 用 到 动画 组 。 

动画 组 是 类 AnimationSet 的 实例 ， 可 以 包含 多 个 动画 对 象 ， 同 时 它 自 己 又 具有 一 个 普通 
动画 对 象 的 所 有 功能 ， 也 就 是 通过 它 可 以 把 一 堆 动画 当 作 一 个 动画 来 操作 。 下 面 是 代码 示例 : 


private fun testAnimationSet()( 
// 8g —IEFERIIBI (HBB? ARED 
val animation - RotateAnimation( 
0.0f, 360f, 
Animation.RELATIVE TO SELF, 0.5f, 
Animation.RELATIVE TO SELF, 0.5f 


) 

// BUE SEIBEG, REVERSE HAREE — UR RKK AJER) 
animation.repeatMode = Animation.RESTART 

// BERANI, 1000 E ( 动 多 KPY 间 ) 

animation.duration = 1000 

//LRBS AW 

animation.repeatCount = 10 

// BEATE, UZERE Cano RIER ERE 


animation.interpolator - LinearInterpolator() 


/ / 创建 一 个 绾 成 动画 ， EX MY MERZ 0.5 到 1.5 

val scaleAnimation = ScaleAnimation(0.5f, 1.5f, 0.5f, 1.5f) 
ScaleAnimation.repeatMode - Animation.REVERSE 
scaleAnimation.duration = 2000 

// REJER PCEUSICIN IPLE 


ScaleAnimation.repeatCount = Animation.INFINITE 


/ / BIEERTIBIAER, ERECTO SEE MRA IIIS 
val animationSet - AnimationSet (false) 
animationSet.addAnimation (animation) 
animationSet.addAnimation(scaleAnimation) 


// EISISIIBI (hE? imageView) 


imageViewHead.startAnimation (animationSet) 
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把 这 段 代 码 封装 到 一 个 方法 中 , 在 登录 按钮 响应 方法 中 调用 此 方法 即 可 。 注意 ， 屏 蔽 掉 原 
先 的 代码 。 

在 上 面 的 代码 中 , 除了 原来 的 旋转 动画 ， 又 创建 了 一 个 缩放 动画 , 然后 把 这 两 个 动画 都 加 
到 animationSet 中 。 注意 ， 最 后 imageView 启动 动画 是 通过 动画 组 而 不 是 某 个 动画 ， 同 时 缩放 
动画 的 重复 次 数 是 INFINITE. (无 尽 的 ) ， 即 永 不 停息 。 


1 2 .4 属性 动画 


属性 动画 所 用 到 的 类 与 视图 动画 不 同 , 但 实现 原理 是 一 样 的 , 在 操作 动画 时 要 考虑 的 因素 
也 完全 一 样 。 下 面 就 用 属性 动画 的 API 把 前 面 的 动画 重新 实现 一 遍 。 
注意 ， 视 图 动画 类 叫 作 XXXXAnimation， 而 属性 动画 的 类 叫 作 XXXXAnimator. 


12.4.1 ”旋转 动画 


新 建 一 个 方法 “testAnimator()”, 把 属性 动画 代码 放 在 其 中 , 并 且 在 响应 登录 按钮 的 方法 
中 调用 它 : 
private fun testAnimator()( 
/ / EU — IN IEFERIIB 
val rotateAnimator = ObjectAnimator.ofFloat (imageViewHead, "rotation", Of, 
180f) 
rotateAnimator.duration - 1000 
rotateAnimator.repeatCount - 10 
rotateAnimator.repeatMode - ValueAnimator.REVERSE 
rotateAnimator.interpolator - LinearInterpolator() 
rotateAnimator.start() 


} 

下 面 对 比 着 视图 动画 来 讲 。 创 建 动画 时 只 使 用 了 一 个 类 : ObjectAnimator 。 我 们 使 用 它 的 
静态 工厂 方法 ofFloat0 来 创建 一 个 动画 对 象 ， 这 个 方法 表示 动画 的 值 由 float 类 型 数据 表示 。 
还 有 很 多 其 他 工厂 方法 ， 比 如 ofArgbO〈 这 个 动画 的 值 由 ARGB 型 数 表 示 ， 表 示 颜 色 ) 等 。 
再 回 到 这 个 旋转 动画 ， 我 们 为 ofFloatO 传 入 了 四 个 参数 ， 其 中 第 一 个 是 要 动 的 控件 ， 第 二 个 是 
要 动 的 属性 。 改 变 旋转 属性 的 值 不 就 是 让 控件 转 吗 ? 这 个 属性 的 名 字 是 如 何 得 到 的 呢 ? 怎么 知 
道 要 动 的 控件 有 没有 这 个 属性 呢 ? 可 自行 查看 类 的 源码 或 API 文档 。 

最 后 一 条 语句 是 启动 动画 , 由 于 前 面 已 指定 了 要 动 的 控件 , 因此 这 里 直接 调用 动画 对 象 的 
start( 方 法 即 可 。 运 行 App， 单 击 登录 按钮 后 图 像 以 自己 的 中 心 点 为 轴 来 回转 。 

属性 动画 API 是 被 推荐 使 用 的 ， 是 吸收 视图 动画 经 验 后 改进 的 ， 不 论 要 动 一 个 控件 的 什 
么 地 方 ， 动 画 的 创建 代码 都 很 一 致 ， 而 且 几乎 可 以 动 控件 的 所 有 属性 。 思 考 一 下 ， 能 不 能 让 图 
像 以 它 的 左上 角 为 转轴 呢 ? 
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12.4.2 ”动画 组 
属性 动画 也 支持 动画 组 ， 见 下 面 的 代码 : 


private fun testAnimatorSet(){ 


180f) 


1.5f) 


1.5f) 


// üf& — NEREZE 


val rotateAnimator = ObjectAnimator.ofFloat (imageViewHead, "rotation", Of, 


rotateAnimator.duration = 1000 
rotateAnimator.repeatCount = 2 
rotateAnimator.interpolator = LinearInterpolator() 
rotateAnimator.repeatMode = ValueAnimator.REVERSE 


// Bet — PAESI, x f 


val scaleAnimatorX = ObjectAnimator.ofFloat (imageViewHead, "scaleX", 0.5f, 


scaleAnimatorX.duration = 1000 
ScaleAnimatorX.repeatCount = 10 
ScaleAnimatorX.repeatMode = ValueAnimator.REVERSE 


// EI — VRR, v A 


val scaleAnimatorY = ObjectAnimator.ofFloat (imageViewHead, "scaleY", 0.5f, 


scaleAnimatorY.duration = 1000 
ScaleAnimatorY.repeatCount = 10 
ScaleAnimatorY.repeatMode = ValueAnimator.REVERSE 


/ / EJ — NSTIBIAR. 


val animatorSet - AnimatorSet() 


animatorSet.play(scaleAnimatorX).with(scaleAnimatorY).after(rotateAnimator) 


) 


animatorSet.start() 


因为 要 放 到 动画 组 中 ， 所 以 旋转 动画 的 start() 方 法 不 再 被 调用 ， 并 且 又 创建 了 两 个 缩放 动 
画 。 我 们 无 法 在 ImageView 中 找到 setScale0 属 性 ， 只 能 找到 setScaleXQ fll setScaleYO 属 性 ， 
所 以 我 们 需要 创建 两 个 动画 实现 横向 和 纵向 上 同时 缩放 。 注意 , 这 里 创建 动画 组 时 所 用 的 类 不 
是 AnimationSet， 而 是 AnimatorSet。 把 动画 加 到 动画 组 中 不 再 是 add0， 而 是 playO、withO、 
before0 、after0 之 类 的 方法 ， 设 置 几 个 动画 之 间 的 播放 顺序 时 就 像 写作 文 ， 比 如 这 里 表达 的 是 
“在 rotateAnimator 之 后 播放 scaleAnimatorX 与 scaleAnimatorY”。 所 以 运行 App 时 ， 头 像 会 
先 转 几 下 ， 转 完 后 再 忽 大 忽 小 不 停 软 。 

当然 ， 创 建 控件 动画 的 API 还 有 其 他 方式 ， 但 是 它们 都 是 基于 视图 动画 或 属性 动画 的 一 
些 变形 而 已 。 互 联网 就 是 最 好 的 手册 ， 如 果 感 兴趣 ， 可 以 自己 上 网 去 查 。 

现在 整个 LoginFragment 类 的 样子 是 这 样 的 : 


159 


Android 1 


编程 通俗 


import android.os.Bundle 

import android.support.design.widget.Snackbar 
import android.support.v4.app.Fragment 

import android.text.Editable 

import android.view.LayoutInflater 

import android.view.View 

import android.view.ViewGroup 

import kotlinx.android.synthetic.main.fragment login.* 
import android.view.animation.Animation 

import android.view.animation.LinearInterpolator 
import android.view.animation.RotateAnimation 
import android.view.animation.AnimationSet 
import android.view.animation.ScaleAnimation 
import android.animation.ValueAnimator 

import android.animation.ObjectAnimator 

import android.animation.AnimatorSet 


class LoginFragment: Fragment() ( 
override fun onCreateView( 
inflater: LayoutInflater, container: ViewGroup?, 
savedInstanceState: Bundle? 
): View? ( 
return inflater.inflate(R.layout.fragment login, container, false) 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) ( 
super.onViewCreated(view, savedInstanceState) 


/LLBHTETES nint HE 
editTextName.setHint ("请 输入 用 户 名 ") ; 


/LIBBEBORTCUIIIU o EIE, U Lambda HER 


this.buttonLogin.setOnClickListener ( 


//8l& Snackbar X/$& 
val snackbar = Snackbar.make (it, "你 点 我 干 喻 ?"，Snackbar .IENGTH LONG); 
ELI 


snackbar.show(); 


//testAnimation() 
//testAnimationSet () 
//testAnimator() 
testAnimatorSet() 


I LBIBEEEAMHERER, AMTET 
this.buttonRegister.setOnClickListener( 


// 局 动 法 骨 页 历 
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val fragment = RegisterFragment() 
// BEBE ED Er EE 
val fragmentManager = activity!!.supportFragmentManager 
fragmentManager.beginTransaction() 
.replace(R.id.fragment container, fragment) //£É f FrameLayout 
-addToBackStack ("login") // EXC UA TBR P 


-commit () 


override fun onViewStateRestored(savedInstanceState: Bundle?) ( 
super.onViewStateRestored (savedInstanceState) 


//% userName Ñ password PTIABUS THRZHUSETE, MRENA RUE 
val mainActivity = activity as MainActivity 
if(mainActivity.userName != null) ( 
editTextName.text = Editable.Factory.getInstance(). 
newEditable (mainActivity.userName) 
) 
if(mainActivity.password != null)( 
editTextPassword.text = Editable.Factory.getInstance(). 
newEditable (mainActivity.password) 


j 


private fun testAnimation()( 

//&lgt PRERE CSIRO IO 

val animation = RotateAnimation(0.0f, 360f, 
Animation.RELATIVE TO SELF, 0.5f, 
Animation.RELATIVE TO SELF, 0.5f) 

// EBLEAIBEG, REVERSE HABERDE- BEREITS OMJER) 

//animation.repeatMode = Animation.RESTART 

// EEBEAFAERTIEI, 1000 SEBP (GEEH 

animation.duration = 1000 

// ERROR 

animation.repeatCount = 10 

// ERAS 

animation.setInterpolator (LinearInterpolator()) 

// 启 动 动画 (SIE? 2] imageView) 


imageViewHead.startAnimation (animation) 


private fun testAnimationSet()í 
// 8g — IER SII (DBE IRE 
val animation = RotateAnimation( 
0.0£, 360f, 
Animation.RELATIVE TO SELF, 0.5f, 
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Animation.RELATIVE TO SELF, 0.5f 
) 
// EELESBES, REVERSE ÜELEUE IE UE BERE ISD OMJER) 
animation.repeatMode = Animation.RESTART 
// BERZH, 1000 EP (GEEH 
animation.duration = 1000 
//EESEEJIGE 
animation.repeatCount = 10 
REIED, RUER RRE CTS RRI EHE 


animation.interpolator = LinearInterpolator() 


//8Ig MAEXSIH, Ex Riv MEREZA 0.5 8/1.5. 

val scaleAnimation = ScaleAnimation(0.5f, 1.5f, 0.5f, 1.5f) 
scaleAnimation.repeatMode = Animation.REVERSE 
ScaleAnimation.duration = 2000 

// REDER IGIOSACUNIEUE 

scaleAnimation.repeatCount = Animation.INFINITE 


// ÜIEEXIBIAER, ERRERA BIBITUR EI -NEAR 
val animationSet = AnimationSet(false) 
animationSet.addAnimation (animation) 
animationSet.addAnimation (scaleAnimation) 


//B (E? imageView) 


imageViewHead.startAnimation (animationSet) 


private fun testAnimator()( 
// &lgt — EREXIT 
val rotateAnimator = ObjectAnimator.ofFloat( 

imageViewHead, "rotation", Of, 180f) 

rotateAnimator.duration = 1000 
rotateAnimator.repeatCount = 10 
rotateAnimator.repeatMode = ValueAnimator.REVERSE 
rotateAnimator.interpolator = LinearInterpolator() 
rotateAnimator.start() 

) 


private fun testAnimatorSet()í 

A- — REFS 

val rotateAnimator = ObjectAnimator.ofFloat(imageViewHead, "rotation", 
Of, 180f) 

rotateAnimator.duration = 1000 

rotateAnimator.repeatCount - 2 

rotateAnimator.interpolator = LinearInterpolator() 

rotateAnimator.repeatMode = ValueAnimator.REVERSE 


// 8Ig — ARI, x fb 
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val scaleAnimatorX = ObjectAnimator.ofFloat(imageViewHead, "scaleX", 
0.5 X.5£) 

scaleAnimatorX.duration = 1000 

ScaleAnimatorX.repeatCount = 10 

SscaleAnimatorX.repeatMode = ValueAnimator.REVERSE 


//8lgt —XRSIB, y fi 

val scaleAnimatorY - ObjectAnimator.ofFloat(imageViewHead, "scaleY", 
0.58; 5f) 

scaleAnimatorY.duration = 1000 

scaleAnimatorY.repeatCount = 10 

SscaleAnimatorY.repeatMode = ValueAnimator.REVERSE 


// 创 慎 一 个 动画 级 

val animatorSet = AnimatorSet() 

animatorSet.play (scaleAnimatorX) .with(scaleAnimatorY). 
after(rotateAnimator) 

animatorSet.start() 


动画 资源 

可 不 可 以 像 设计 界面 那样 ,在 资源 文件 中 定义 好 一 个 动画 后 把 它 应 用 到 控件 上 呢 ? 因为 我 
们 想 尽 可 能 地 做 到 代码 与 设计 分 离 。 告 诉 你 一 个 好 消息 : 这 当然 可 以 ! 下 面 我 们 就 在 XML X 
件 中 定义 上 面 的 动画 组 ， 当 然 首 先 要 添加 一 个 动画 资源 ， 见 图 12-4。 


Eile name: test animate 11 


Resource type: [Values v 


Rootelement: [Animation | 


Source set: lor 
Drawable 
Font 
Available qualifier Layout 


Directory name: 


A Countr 
应 Network Code. 
(9 Locale 


© Cancel 


图 12-4 


将 资源 文件 取 名 为 “test_animate”。 在 资源 类 型 里 ， 有 两 个 都 是 动画 ， 即 Animation 和 
Animator， 正 好 对 应 ViewAnimation 和 ObjectAnimator。 我 们 选择 属性 动画 ， 视 图 动画 资源 与 
之 大 同 小 异 。 单 击 “OK ”按钮 后 创建 如 图 12-5 所 示 的 文件 。 


163 


Android 10 Kotlin 编程 通俗 演义 


iĝ Android ~ O + X*- I- |  LoginFragmentkt X | i test animatexml 


~ Mapp 1 k?xmi version-"i.e" encoding-"utf-s"?) 
> P» manifests 2 «set xmlns:alliroid-"http://schemas .and| 
> java 3 
> PggenerstedJava 4 </set> 
v Beres 


v Ba animator 
a test animate.xml 


图 12-5 


注意 ， 在 es 下 多 了 一 个 文件 来“animator”， 动 画 资 源 文件 就 位 于 此 文件 夹 下 面 。 我 们 
选择 创建 视图 动画 时 会 创建 叫 作 “anim ”的 文件 夹 .xml 文件 的 内 容 默 认定 义 了 根 元 素 “set”， 
表示 动画 组 ， 所 以 Android Studio 希望 我 们 使 用 动画 组 来 定义 动画 。 这 其 实 也 没什么 问题 ， 因 
为 即使 你 只 想 定 义 一 个 动画 ， 动 画 组 里 放 一 个 动画 也 没有 问题 。 当 然 ， 如 果 只 定义 一 个 动画 ， 
完全 可 以 不 用 动画 组 。 

下 面 我 们 向 动画 组 中 添加 动画 ， 代 码 如 下 : 


«?xml version-"1.0" encoding="utf-8"?> 
«set xmlns:android-"http://schemas.android.com/apk/res/android" 
android:ordering-"sequentially"»«!-- A4 EIZE X MUT Ik A EIC — 
«objectAnimator 
android:propertyName-"rotation" 
android:duration-"1000" 
android:valueFrom-"0f" 
android:valueTo-"180f" 
android:repeatCount-"10" 
android:repeatMode-"restart"/» 
t- BEBUBIIAHE RII E fr 
«set android:ordering-"together"^ 
XobjectAnimator 
android:propertyName-"scaleX" 
android:duration-"1000" 
android:valueFrom-"0.5f" 
android:valueTo-"1.5f"/» 
XobjectAnimator 
android:propertyName-"scaleY" 
android:duration-"1000" 
android:valueFrom-"0.5f" 
android:valueTo-"1.5f"/» 
</set> 
</set> 


在 代码 中 ， 外 层 动画 组 (set) 的 android:ordering 指明 其 所 包含 的 动画 是 同时 执行 还 是 依 
次 执行 ， 当 前 值 是 “sequentially”， 表 示 依 次 执行 。 最 外 层 动画 组 元 素 中 包含 了 两 个 元 素 : 一 
个 旋转 动画 和 另 一 个 动画 组 。 子 动画 组 中 又 包含 了 两 个 元 素 ,一 个 横向 缩放 动画 ， 一 个 纵向 缩 
放 动画 ， 且 这 两 个 动画 的 执行 顺序 是 “together” 一 一 同时 执行 。 总 的 来 说 就 是 定义 了 三 个 动 
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画 ， 第 一 个 先 执行 ， 完 成 后 后 两 个 一 起 开始 执行 ， 跟 我 们 用 纯 代 码 定义 的 一 样 。 对 于 XML 代 
码 就 不 做 过 多 解释 了 ， 对 比 Java 代码 很 容易 看 明白 。 

注意 , 不 能 在 这 里 指定 动画 要 动 哪个 控件 ， 因 为 放 在 资源 中 的 目的 就 是 提供 重用 性 。 可 以 
定义 复杂 的 动画 , 然后 在 代码 中 把 它 应 用 到 不 同 的 控件 上 。 怎样 在 代码 中 使 用 动画 资源 呢 ? 见 
下 面 的 代码 : 

private fun testAnimateResource(){ 


// Fi animatorinflater ARWR MEZE 


val set = AnimatorInflater.loadAnimator( 


context, R.animator.test animate) as AnimatorSet 
11 RPH RA RENG RAFN E, MUERE 
set.setTarget (imageViewHead) 
set.start () 
) 


看 代码 一 定 要 “ 观 其 大 略 , 不 求 甚 解 ”， 即 不 要 太 追 求 细 节 , 理解 其 流程 和 每 一 步 的 目的 
是 第 一 位 的 ， 否 则 就 会 学 得 很 慢 。 


12.6 Layout 动画 


到 现在 为 止 我 们 还 没有 动态 向 Layout 中 添加 或 删除 过 控件 ， 因 为 我 们 都 是 在 资源 文件 中 
定义 Layout 的 子 控件 ， 要 想 动态 添加 或 删除 ， 需 要 使 用 Java 代码 。 


12.6.1 向 Layout 控件 添加 子 控件 


我 们 首先 动态 向 Layout 控件 中 添加 子 控件 。 现 在 ConstraintLayout 里 面 有 图 像 、 用 户 名 、 
密码 等 构成 登录 功能 的 核心 控件 ， 我 们 再 用 代码 创建 一 个 按钮 。 

因为 要 在 代码 中 操作 ConstraintLayout， 所 以 需要 指定 一 个 id， 比 如 “layout”， 然 后 就 可 
以 调用 layout.addView0 来 添加 子 控件 了 。 但 是 需要 先 创建 一 个 子 控件 ， 可 以 创建 一 个 按钮 ， 
然后 添加 到 layout 中 ， 代 码 如 下 : 


//Wi Layout Zhi 
fun testLayoutAnimate() ( 
/ / BI —PNÜEECER 
val btn - Button(context) 
// REEERE 
btn.setText ("我 是 被 动态 添加 的 ") 
/LLBLg — NEED R 
val layoutParams = ConstraintLayout.LayoutParams( 
ConstraintLayout.LayoutParams.MATCH CONSTRAINT, //BEJA]HIA tz fiir 
ViewGroup.LayoutParams.WRAP CONTENT 
) 
// ÆR S LayoutParams (HIREK KIEME TEMG ZAKI RUD 
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) 


layoutParams.topToBottom = R.id.buttonRegister 
/ LAU SYEBBHEEDSEE 

layoutParams.leftToLeft = R.id.buttonRegister 
LB EMEN TE. 

layoutParams.rightToRight - R.id.buttonRegister 
/LEBAINASEL BRINWAE, E. d. Fo SUERRURUE RE -THEE AHE 
1124 PRE, ERG EIU dp 
layoutParams.setMargins(0, 24, 0, 0) 
LIBERTO LEVE EKA P 
btn.setLayoutParams (layoutParams) 

// UF RelativeLayout 办 

layout.addView (btn) 


向 一 个 Layout 控件 中 添加 子 控件 并 不 是 那么 简单 ， 因 为 还 要 考虑 怎样 摆 放 ， 设 置 一 个 控 
件 的 排版 方式 需要 用 到 LayoutParams 内 部 类 。 各 Layout 类 中 都 有 这 个 内 部 类 ， 因 为 不 同 的 
Layout 类 有 不 同 的 排版 参数 要 设置 。 

运行 App， 就 会 发 现在 单 击 登录 按钮 后 ， 最 下 面 出 现 一 个 新 的 按钮 ， 同 时 引起 其 他 控件 位 
置 的 变化 ， 如 图 12-6 和 图 12-7 所 示 。 


请 输入 用 户 名 


请 输入 密码 


12-6 图 12-7 


现在 还 没有 动画 效果 ， 下 面 添加 动画 效果 。 只 需 在 Layout 资源 文件 中 为 RelativeLayout 
添加 一 个 属性 android:animateLayoutChanges="true" 即 可 。 再 次 运行 App, 单 击 登录 按钮 时 依然 
会 添加 新 按钮 ， 但 是 能 看 到 动画 了 : 先是 现 有 的 按钮 往 上 移 ， 为 新 按钮 腾 出 空间 ， 然 后 新 按钮 
才 出 现 ， 是 一 个 从 无 到 有 的 过 程 。 

属性 animateLayoutChanges 的 意思 是 “动画 排版 改变 ”， 为 true 时 就 使 用 默认 动画 ， 就 是 
现在 我 们 看 到 的 。 但 是 , 我 们 还 不 满足 , 希望 尝试 一 些 不 同 的 动画 , 此 时 可 以 自 定 义 排版 动画 ， 
详 见 下 节 分 解 。 
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12.6.2 ViewGroup 


在 自 定义 排版 动画 之 前 , 大 家 要 明确 一 个 概念 : ViewGroup. 它 是 一 个 类 , 虽 属 于 控件 类 ， 
但 这 种 控件 类 的 特点 是 可 以 容纳 多 个 子 控件 。 实 际 上 能 包含 子 控件 的 控件 都 是 从 ViewGroup 
派生 的 ， 而 ViewGroup 又 是 从 View 派生 的 ， 所 以 ViewGroup 依然 是 控件 。 各 种 Layout 控件 
能 包含 子 控件 ， 因 为 它们 就 是 从 ViewGroup 派生 的 。ScrollView 也 能 包含 子 控件 ， 也 是 从 
ViewGroup 派生 的 。 后 面 要 讲 的 列表 控件 ListView 和 RecyclerView 也 是 从 ViewGroup 派生 的 。 


所 有 从 ViewGroup 派生 的 类 都 支持 排版 动画 。 


排版 动画 是 在 ViewGroup 中 子 控件 的 排版 变化 时 发 生 的 ， 比 如 添加 或 删除 子 控件 时 。 因 
为 一 下 就 显示 出 来 让 人 感觉 一 惊 一 乍 的 ， 所 以 要 加 入 动画 的 过 程 ， 做 一 个 有 “修养 ”的 App。 
首先 要 清楚 ViewGroup 排版 动画 的 原理 。 一 个 控件 在 ViewGroup 中 出 现 或 消失 时 ， 这 个 
显示 或 消失 的 过 程 要 有 动画 ,同时 还 影响 到 其 他 控件 的 位 置 , 它们 的 位 置 变化 也 要 有 动画 。 要 
告诉 ViewGroup 这 些 不 同 的 变化 所 执行 的 动画 ， 所 以 最 多 可 以 为 ViewGroup 设置 五 个 动画 对 


象 ， 分 别 对 应 : 


CHANGE APPEARING: 当 某 个 控件 出 现时 ， 其 他 控件 执行 的 动画 。 
CHANGE DISAPPEARING: 当 某 个 控件 消失 时 ， 其 他 控件 执行 的 动画 。 
APPEARING: 某 个 控件 出 现时 执行 的 动画 。 

DISAPPEARING: 某 个 控件 消失 时 执行 的 动画 。 

CHANGING: 控件 出 现 或 消失 之 外 的 原因 引起 的 排版 变化 时 执行 的 动画 。 


不 必 设 置 所 有 变化 所 对 应 的 动画 ,不 设置 就 用 默认 动画 。 注意， 这 些 动画 不 一 定 都 能 起 作 
用 ， 比 如 CHANGE APPEARING 和 CHANGE DISAPPEARING 在 大 部 分 ViewGroup 控件 中 


就 不 起 作用 。 


要 想 设 置 这 些 动画 给 ViewGroup, 首先 需要 创建 对 应 的 动画 对 象 , 然后 把 动画 对 象 设置 给 
一 个 LayoutTransition 对 象 ， 再 把 LayoutTransition 对 象 设置 给 ViewGroup。 注 意 , 给 排版 用 的 


动画 只 能 是 属性 动画 ， 而 不 是 视图 动画 。 下 一 节 我 们 就 用 代码 实现 一 下 。 
12.6.8 ”设置 排版 动画 


修改 testLayoutAnimate0， 代 码 如 下 : 


//Wi Layout ifi 
fun testLayoutAnimate() ( 
// EI —NEEECER 
val btn - Button(context) 
/LRBUEHIUSIUXCK 
btn.setText ("我 是 被 动态 添加 的 ") 
// Bf& —NHAREASONI S 
val layoutParams = ConstraintLayout.LayoutParams( 
ConstraintLayout.LayoutParams.MATCH CONSTRAINT, //BRJA]HIAUR PO fif 
ViewGroup.LayoutParams.WRAP CONTENT 
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// THMJHi f LayoutParams (HEZO KIEME EM IZAKI FE 
layoutParams .topToBottom = R.id.buttonRegister 

11 ERTEM IITE 

layoutParams.leftToLeft = R.id.buttonRegister 

LUE TERG R ITF 

layoutParams.rightToRight = R.id.buttonRegister 

/LEBUNEASEL BRINAE, E. d. Fo SUBRURUE RE -THEE AHE 
1124 PRE, HERCA EBEN dp. 

layoutParams.setMargins(0, 24, 0, 0) 

11 IZ VHIR ERU FJ E HA P 


btn.setLayoutParams (layoutParams) 


val transition = LayoutTransition() 
4/35 — NEETEHLIII, PECÆKNA ZUH 
// fli AninatorInflater JA R WMR 
val set = AnimatorInflater.loadAnimator( 

context, R.animator.test animate) as AnimatorSet 
//BUBEEHTEHLIN IOS 
transition.setAnimator(LayoutTransition.APPEARING, set) 
// BENEH HAR, HAt E h EAE EER I] 
transition.setDuration(LayoutTransition.CHANGE APPEARING, 4000) 
// ALS SIBI) LayoutTransition HÆ i BH. SJ viewGroup P 


layout.layoutTransition = transition 


// HMF RelativeLayout 办 
layout.addView (btn) 


} 

在 方法 testLayoutAnimate0 中 增加 了 设置 动画 的 代码 〈 粗 体 部 分 ) 。 可 以 看 到 这 里 依然 使 
用 了 test_animate.xml 动画 资源 ， 把 动画 应 用 到 了 控件 出 现 的 过 程 ， 如 图 12-8 所 示 。 注 意 ， 只 
要 在 代码 中 为 ViewGroup 设置 了 LayoutTransition， 就 可 以 把 XML 中 为 控件 添加 的 属性 
animateLayoutChanges 去 掉 。 


12-8 
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12.7 转 场 动画 


能 不 能 利用 所 学 的 动画 API 设计 两 个 Activity 切换 时 的 动画 ， 或 两 个 Fragment 切换 时 的 
动画 ? 不 能 ! 因为 Activity 或 Fragment 都 不 是 控件 。 它 们 之 间 的 切换 动画 创建 方式 不 同 于 之 
前 ， 而 且 这 种 动画 有 专门 的 名 字 ， 叫 转 场 动画 。 

实际 上 ，Activity 的 切换 默认 已 经 使 用 了 转 场 动画 ， 凡 是 用 Android 系统 的 人 都 有 体会 。 
Fragment 的 切换 默认 是 没有 动画 的 ， 下 面 我们 就 为 Fragment 的 切换 添加 转 场 动画 。 


12.7.1 使 用 默认 转 场 动画 
启用 默认 转 场 动画 ， 需 要 为 控制 Fragment 切换 的 对 象 开 启 一 些 设置 。 在 LoginFragment 


的 注册 按钮 响应 方法 中 ， 找 到 切换 Fragment 的 代码 。 
要 启用 默认 动画 ， 只 需 一 句 代 码 ， 如 下 《〈 粗 体 部 分 所 示 ) : 


LLBBEEBHEEI, EA ZEB 


this.buttonRegister.setOnClickListener( 


/ LBARIEBPRT 
val fragment = RegisterFragment() 
/ / BEER REA E ULM 


val fragmentManager - activity!!.supportFragmentManager 
fragmentManager.beginTransaction() 
-replace(R.id.fragment container, fragment) // HABI FrameLayout JLZ fo 
-addToBackStack ("login") // Jf X e VITA CA Eri Hor 
.setTransition(FragmentTransaction.TRANSIT FRAGMENT OPEN) 
.commit () 

) 

这 段 代 码 是 LoginFragment 中 onViewCreated()If] “.setTransition (FragmentTransaction 
.TRANSIT_FRAGMENT_OPEN)” 为 Fragment 切换 增加 了 动画 功能 , 不 仅仅 去 时 有 动画 , [n] 
来 时 也 有 动画 。fragmentTransaction 就 是 负责 Fragment 切换 的 ， 所 以 通过 它 启用 动画 ， 合 理 ! 
参数 是 以 下 四 个 常量 值 之 一 ， 代 表 系 统 内 置 的 转 场 动画 : 


* TRANSIT NONE: 没有 动画 。 

* TRANSIT FRAGMENT OPEN: 打开 动画 。 

* TRANSIT FRAGMENT CLOSE: 关闭 动画 。 

* TRANSIT FRAGMENT FADE: 渐 入 渐 出 动画 。 


不 论 设置 了 哪 种 动画 ， 去 和 回 自动 反 着 来 ， 一 试 便 知 。 
12.7.2 ” 自 定义 转 场 动画 
可 不 可 以 自 定 义 转 场 动画 呢 ? 当然 没 问题 ! FragmentTransaction 有 两 个 重 载 方法 : 
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FragmentTransaction setCustomAnimations ( 
GAnimatorRes RnimRes int varl, GAnimatorRes GAnimRes int var2); 
FragmentTransaction setCustomAnimations ( 
QGAnimatorRes RnimRes int varl, GAnimatorRes 8AnimRes int var2, 
GAnimatorRes @AnimRes int var3, QGAnimatorRes GAnimRes int var4); 


看 名 字 就 知道 ， 这 个 方法 用 于 设置 自 定义 动画 。 假 设 从 A 切换 到 B， 参 数 varl 是 B 执行 
的 动画 ,参数 var2 是 A 执行 的 动画 。 如 果 只 设置 了 这 两 个 动画 ,那么 在 从 B 返回 A 时 就 没有 
动画 。 如 果 还 设置 了 参数 var3 和 var4， 那 么 从 B 返回 A 时 ，A 执行 var3，B 执行 var4。 

意 , 参数 前 的 注解 “@AnimatorRes @AnimRes” 并 不 是 参数 的 一 部 分 , 是 用 于 提高 IDE 
感知 能 力 的 , 同时 也 是 给 人 看 的 , 根据 其 名 字 可 以 判断 出 它 修饰 的 参数 是 一 个 动画 资源 。 这 个 
动画 可 以 是 属性 动画 ,也 可 以 是 View 动画 (注意 9.0 之 前 的 版 本 不 支持 属性 动画 ) 。AnimRes 
是 “Anim Resource” 的 缩写 ，View 动画 资源 放 在 anim 组 下 ， 所 以 我 们 就 知道 向 参数 中 传 入 
的 可 以 是 View 动画 。 同 理 ， 属 性 动画 资源 放 在 animator 组 下 ， 所 以 也 可 以 向 参数 中 传递 属性 
动画 。 由 于 存在 这 个 注解 ， 因 此 在 代码 中 向 此 方法 传 入 的 如 果 不 是 动画 资源 ， 那 么 IDE 会 提 
示 错 误 。 

因为 有 去 有 回 ， 所 以 需 先 准备 四 个 动画 资源 ， 选 择 有 四 个 参数 的 方法 。 进 入 的 页 面 旋转 着 
由 小 变 大 出 现 ， 离 开 的 页 面 从 左 向 右 移 走 ， 返 回 时 离开 的 页 面 旋转 着 由 大 变 小 消失 ， 进 入 的 页 面 
从 右 向 左 移出 来 ， 对 应 的 动画 资源 分 别 是 in animl.xml. 、in_anim2.xml 、out_animl.xml、 
out anim2.xml. 

在 项 目 树 的 根 上 右 击 , 在 弹出 的 快捷 菜单 中 选择 创建 资源 文件 , 打开 的 对 话 框 如 图 12-9 所 示 。 


Elle name: in anim 


Besource type: | Animation. 


Root element: set 

Source set: main 

Directory name: anim 

Available qualifiers: Chosen qualifiers: 
A Country Code 

© Network Code 

@ Locale 


图 12-9 


注意 ， 资 源 类 型 要 选 Animation 而 不 是 Animator， 因 为 [ae 
2 。 创 建 四 个 文件 之 后 ,在 res 下 出 现 了 anim 


见 图 12-10) 。 

* in anim] xml 是 从 登录 页 面 进入 注册 页 面 时 注册 页 面 要 执 站 
行 的 动画 。 v. animator 

* out animl.xml 是 从 登录 页 面 进入 注册 页 面 时 登录 页 面 执行 s test animate xml 


> B drawable 


的 动画 。 
12-10 
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* in anim2 xml 是 从 注册 页 面 返 回 登录 页 面 时 登录 页 面 要 执行 的 动画 。 
* out anim2.xml 是 从 注册 页 面 返 回 登 录 页 面 时 注册 页 面 要 执行 的 动画 。 


以 下 是 这 四 个 文件 的 内 容 。 
* in anim1.xml 


<?xml version-"1.0" encoding-"utf-8"?» 
<set xmlns:android-"http://schemas.android.com/apk/res/android" 
android:interpolator-"8(android:anim/decelerate interpolator"^ 
«1--AK—fRH--» 
«rotate 
android:fromDegrees-"0" 
android:toDegrees-"360" 
android:pivotX-"50£" 
android:pivotY-"50£" 
android:duration-"1000" /> 


er AUNEX-- 

«scale 
android:fromXScale-"0.0" 
android:toXScale-"1.0" 


android:fromYScale-"0.0" 

android:toYScale-"1.0" 

android:pivotX-"50£" 

android:pivotY-"50£2" 

android:duration-"1000" 

android:fillBefore-"false" /> 
«/set» 


属性 android:interpolator 指定 了 插值 函数 ，decelerate_interpolator 是 先 加 速 再 减速 的 函数 。 


* out anim1.xml 


<?xml version-"1.0" encoding-"utf-8"?» 

er--MIBI 

«translate xmlns:android-"http://schemas.android.com/apk/res/android" 
android:interpolator-"8(android:anim/ accelerate interpolator" 
android:fromXDelta-"0" 
android: toXDelta="100%p" 
android:duration="1000"> 

</translate> 


fromXDelta="0" 表 示 在 横向 上 从 0 位 置 开始 移动 ，toXDelta="100%p" 表 示 移 动 100% 宽 度 
的 距离 ， 即 向 右 移动 。 
* in anim2.xml 


<?xml version-"1.0" encoding-"utf-8"?» 
«translate xmlns:android-"http://schemas.android.com/apk/res/android" 
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android:interpolator="@android:anim/ accelerate interpolator" 
android:fromXDelta="100%p" 

android:toXDelta="0" 

1000"> 


android:duration- 


«/translate^ 
向 左 移动 。 


* out anim2.xml 


<?xml version-"1.0" encoding-"utf-8"?» 
<set xmlns:android-"http://schemas.android.com/apk/res/android" 
android:interpolator-"G(android:anim/ decelerate interpolator"^ 
er-- KR MIB-- 
«rotate 
android:fromDegrees-"0" 
android:toDegrees-"-360" 
android:pivotX-"50Zz" 
android:pivotY-"50£" 
android:duration-"1000" /> 
<!--MKÆJ--> 
<scale 
android:fromXScale-"1.0" 
android:toXScale-"0.0" 
android:fromYScale-"1.0" 
android:toYScale-"0.0" 
android: 
android: 
android:duration-"1000" 
android:fillBefore-"false" /> 
«/set» 


下 一 步 修改 登录 页 面 切换 到 注册 页 面 的 代码 ， 添 加 自 定义 动画 : 
V/DE, EA ZEB 


this.buttonRegister.setOnClickListener( 


11 BARIHEBPRT 
val fragment = RegisterFragment() 
11 PETEAR DATEI AER E 


val fragmentManager = activity!!'.supportFragmentManager 
fragmentManager.beginTransaction() 
-setCustomAnimations (R.anim.in animl,R.anim.out animl, 
R.anim.in anim2,R.anim.out anim2)//I EX/BIZ ZU EZ Hf 
.replace(R.id.fragment container, fragment) //É f Fragment 
.addToBackStack ("login") // HRA KATER P 


.commit () 


也 可 以 为 登录 页 面 的 初次 出 现 添 加 动画 。 登 录 Fragment 是 第 一 个 被 添加 的 ， 它 是 被 add() 
方法 添加 的 , 但 是 依然 可 以 在 add 之 前 设置 动画 。 代 码 如 下 CMainActivity 的 onCreate0 中 ) : 
// 38 —f Fragment (ÆR Fragment) 加 入 activity 办 
// Kit Fragment S 
supportFragmentManager.beginTransaction() 
// KE Fragment HHR 
.setCustomAnimations (R.anim.in animi,R.anim.out anim1) 
-add(R.id.fragment container, fragment) 
.commit () 


再 次 运行 App， 欣 赏 登录 页 面 华丽 的 登场 过 程 吧 。 
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再 为 登录 界面 增加 一 个 效果 : 圆 形 头像 ， 如 图 13-1 所 示 。 
到 现在 为 止 ，Android SDK 中 自 带 的 View 还 没有 一 个 能 显示 这 

种 效果 ， 所 以 只 能 自己 设计 ， 需 要 创建 一 个 “Custom View”。 
实际 上 Android 提供 了 一 个 帮助 显示 
“RoundedBitmapDrawable”, 但 是 它 只 能 显示 圆 形 图 像 , 不 能 套 圈 。 
首先 创建 RoundedBitmapDrawable 的 实例 , 调 
入 一 个 Bitmap 实例 ， 然 后 设置 它 的 圆 角 半径 日 


第 13 章 
< 自 定义 控件 


圆 形 图 像 的 类 ， 


» 


叫 作 


用 其 构造 方法 时 需要 传 
可 。 代 码 如 下 : 


图 13-1 


val rbmpDrawable = RoundedBitmapDrawableFactory.create(resources, bitmap) 


rbmpDrawable.setCornerRadius (100) 


试用 它 把 登录 页 面 的 头像 改 成 


Av, 


我 们 可 以 


所 以 必须 通过 代码 使 用 它 。 代 码 如 下 : 
//A Drawable EJRICUK Bitmap, St LASTE Ig XC EREET EJ EE Bitmap X $e 


val src - BitmapFactory.decodeResource (resources, 


//&l& RoundedBitmapDrawable X[$& 
val roundedBitmapDrawable = RoundedBitmapDrawableFactory.create (resources, 


src) 


// BRAM E RELER) 
roundedBitmapDrawable.cornerRadius = 100f 
//% Drawable RES Imageview ft, BAM ARAI ita p R EHR 


imageViewHead.setImageDrawable (roundedBitmapDrawable) 


把 这 段 代码 放 在 页 面 显 示 之 前 比较 好 , 所 以 放 在 了 LoginFragment 的 onViewCreated() 方 法 
中 。 运 行 App， 效 果 如 图 13-2 所 示 。 


可 以 看 到 图 像 被 明显 地 前 
的 背景 看 起 来 依然 是 


方 的 。 


圆 的 。 注 意 ， 无 法 在 界面 设计 器 中 使 用 这 个 类 ， 


R.drawable.female) 


j 切 成 了 圆 角 。 注 意 ， 剪 切 的 是 图 像 ， 而 不 是 控件 ， 所 以 图 像 控 件 


效果 不 太 好 ， 如 果 找 一 个 有 背景 的 图 像 〈 见 图 13-3 ) ， 效 果 就 明显 了 。 
角 的 半径 设置 为 100, 现在 这 个 图 像 只 是 圆 角 而 不 是 一 个 圆 ， 最 终 效果 如 


图 像 太 大 ， 把 圆 


图 13-4 所 示 ; 当 把 贺 


效果 如 图 13-5 所 示 。 


角 半 径 设 置 为 图 像 边 长 的 一 半 时 就 成 了 贺 


， 比 如 把 圆 角 半径 设置 成 400， 


9133: 自 定义 控件 


5 B 


132 图 13-3 
134 图 13-5 


如 果 不 知 道 一 幅 图 像 的 大 小 ,也 可 以 通过 代码 获取 这 个 图 像 的 宽 或 高 ,如 果 图 像 不 是 方形 ， 
就 取 最 小 的 边 长 然后 除 以 2 作为 圆 角 半径 。 仔 细 看 圆 的 边缘 ， 就 会 发 现 有 锯齿 存在 。 可 以 加 入 
反 锯 齿 特 效 ， 代 码 如 下 : 

/LCBEBUR A E RHIESUESHERO 

rbmpDrawable.setCornerRadius (400f); 


/LREBURIEHT 


rbmpDrawable.setAntiAlias(true) 


我 们 最 终 想 要 的 是 套 一 个 圈 的 圆 形 图 像 ， 所 以 还 要 研究 一 下 自 定义 控件 。 


| we | 创建 一 个 Custom View 

创建 一 个 Custom View 〈 自 定义 控件 ) ， 需 要 直接 或 间接 从 类 View 派生 一 个 子 类 ， 然 后 
重 写 父 类 中 的 一 些 方法 ， 以 实现 不 同 的 行为 或 外 观 。 如 果 仅 仅 这 样 做 , 那么 这 个 类 只 适合 在 代 
码 中 使 用 , 不 能 在 界面 构建 器 中 使 用 。 如 果 要 在 界面 设计 器 中 使 用 , 就 需要 实现 一 个 特殊 的 构 
造 方法 。Android Studio 为 我 们 提供 了 创建 自 定义 控件 的 向 导 ， 使 用 这 个 向 导 ， 创 建 出 来 的 控 
件 类 就 可 以 在 界面 设计 器 中 使 用 。 下 面 创建 一 个 Custom View。 

在 项 目 树 的 根 上 右 击 ， 在 弹出 的 快捷 菜单 中 选 “new 一 UI Component- Custom View" fij 
令 ( 见 图 13-6) ， 出 现 一 个 对 话 框 ， 在 其 中 配置 类 名 、 包 名 等 〈 见 图 13-7) 。 
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iĝ Activity kat AREN Creates a new custom view that extends 

iĝ Android Auto android.view.View and exposes custom attributes. 
(f Folder 

iĝi Fragment Package name: 


r 
AM Google tancestate: Bun| View dass The 


com.example.niu.ñirstcotlinapp 


RoundimageView 


Kotlin 


$} Other icestate) 
EIE a 


Target Source Set: 


图 13-6 


main 


图 13-7 


为 Custom View 类 取 名 RoundImageView, ik3& "Source Language 源码 语 言 ) ”一 定 要 


保证 是 Kotlin。 单 击 “Finish ”按钮 ， 此 时 会 创建 多 个 文件 ， 


首先 是 类 文件 〈 见 图 13-8 ， 其 


次 是 res/layout 下 的 sample round image view.xml ， 还 有 一 个 是 res/values 下 的 
attrs round image view.xml (这 两 个 文件 的 作用 后 面 再 讲 ) 。 


[v Ts com.exampleniufirstcotlir ` 
&& LoginFragment 
/& MainActivity 
& RegisterFragment.kt 
Rè RoundlmageView 


* TODO: document your custom 


class RoundImageView : View { 


A TestFragmentActivity | 4 private var examplesString; 
A TestFragmentActivityFt 38 private var exampleColor: 


图 13-8 


1 3.2 Custom View 类 


下 面 讲 一 下 Custom View 类 重要 的 几 个 点 。 
13.2.1 构造 方法 
构造 方法 的 代码 如 下 : 


class RoundImageView : View ( 


constructor (context: Context) : super (context) { 


init (null, 0) 
} 


constructor (context: Context, attrs: AttributeSet) : super (context, attrs) { 


init(attrs, 0) 
} 


constructor (context: Context, attrs: AttributeSet, defStyle: Int) 


super(context, attrs, defStyle) ( 
init(attrs, defStyle) 
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将 焦点 集中 在 构造 方法 上 , 这 里 有 三 个 构造 方法 。 第 一 个 是 最 基本 的 ， 如 果 不 在 界面 构建 
器 中 使 用 View， 用 这 一 个 就 够 了 。 第 二 个 是 在 界面 构建 器 中 使 用 时 才 被 调用 的 ， 是 一 个 可 以 
包含 多 个 属性 〈Attribute) 的 集合 。 在 界面 设计 器 中 我 们 可 以 为 View 的 很 多 属性 设置 值 ， 在 
运行 时 最 终 还 是 会 调用 构造 方法 来 创建 View 的 实例 。 问 题 来 了 ， 我 们 设置 的 那些 属性 是 怎么 
FEA HINE? 通过 Setter 方法 吗 ? 不 对 ， 因 为 很 多 属性 并 没有 对 应 的 Setter 方法 ， 那 么 是 通过 什 
么 呢 ? 就 是 通过 构造 方法 的 参数 “AttributeSet attrs” 传 入 。 第 三 个 参数 defStyle 是 一 个 Style 
资源 的 id， 这 个 Style 中 规定 了 View 一 些 外 观 属性 的 默认 值 。 比 如 下 面 这 个 Style 资源 定义 了 
Button 这 种 View 的 一 些 默 认 属性 : 
<style name-"Base.Widget.AppCompat.Button" parent="android:Widget"> 
<item name="android:background">@drawable/ 
abc_btn_default_mtrl_shape</item> 
<item name="android:textAppearance">?android:attr/ 
textAppearanceButton</item> 
<item name="android:minHeight">48dip</item> 
<item name="android:minWidth">88dip</item> 
<item name="android:focusable">true</item> 
<item name="android:clickable">true</item> 
<item name="android:gravity">center_vertical|center_horizontal</item> 
</style> 


构造 方法 是 用 于 初始 化 对 象 的 。 注 意 ， 这 三 个 构造 方法 都 调用 了 同一 个 方法 : init0。 因 为 
它们 三 个 里 面 要 做 的 工作 都 差不多 , 所 以 提取 了 这 部 分 代码 到 一 个 单独 的 方法 中 , 以 提高 可 维 
PHE. init, 一 看 名 字 就 知道 是 初始 化 的 意思 , 那么 这 里 面 究 竟 做 了 什么 呢 ? 要 明白 它 做 了 什 
么 ， 其 实 应 该 先 研究 男 一 个 方法 onDraw0， 因 为 init0 中 做 的 事情 基本 都 是 为 onDraw0 的 执行 
做 准备 。 


13.2[2 ”onDraw() 方 法 


像 这 种 onXXXO 名 字 的 方法 都 被 称 为 回调 方法 。 所 谓 回调 方法 ， 就 是 自己 不 用 而 被 别人 
调用 的 方法 。 比 如 onDraw0 就 是 当 “ 画 ”的 时 候 调 用 。 画 什么 呢 ? 画 控件 的 外 观 ， 控 件 长 什 
么 样 就 是 由 这 个 方法 决定 的 。 那 么 这 个 方法 被 谁 调用 呢 ? 被 Android 系统 调用 ，Android 系统 
需要 重新 画 这 个 控件 的 时 候 就 调用 它 。 那 什么 时 候 Android 系统 才 需 要 重新 画 一 个 控件 呢 ? 比 
如 一 个 控件 被 别 的 控件 挡住 了 , 遮挡 物 离开 时 ; 我们 按 下 一 个 按钮 , 要 显示 “ 按 下 ”的 状态 时 ; 
改变 了 一 个 控件 中 的 文本 内 容 时 …… 

在 “fun onDraw(canvas: Canvas)” 中 ， 有 一 个 参数 “canvas”， 是 画布 的 意思 ， 也 就 是 说 
要 画 出 控件 的 外 观 就 在 这 个 画布 上 画 。 在 此 要 多 说 一 句 ， 回 调 函数 也 能 自己 调用 。 在 语法 上 绝 
对 没 问题 ， 但 是 onDraw0 就 不 能 自己 调用 ， 主 要 是 参数 的 问题 。 参 数 canvas 是 根据 系统 信息 
创建 出 来 的 ， 里 面 有 太 多 的 信息 ,我 们 自己 构建 的 话 容易 出 问题 。 并 且 ， 每 次 调用 这 个 方法 都 
会 重新 画 控 件 ， 这 个 过 程 比较 耗 时 ， 所 以 不 应 该 在 不 必要 的 时 候 随 便 调 用 。 实 际 上 如 果真 的 要 
重新 画 控 件 ， 就 应 该 调用 方法 invalidate0 发 出 一 个 请 求 ， 而 不 是 直接 调用 onDrawO。 

控件 当前 的 外 观 如 图 13-9 所 示 。 
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«9 Switch 


Component Tree 


[s] Framel ayout. 


其 RoundImageview 


13-9 


注意 ， 这 是 在 预览 中 的 样子 ， 跟 真实 运行 时 没有 什么 差别 〈 如 果 看 不 到 ， 试 着 编译 一 下 工 


程 》。 中间 显示 文本 ,也 显示 了 一 幅 图 像 ， 其 背景 为 灰色 。 下 面 我 们 看 一 下 是 怎样 在 onDrawO 
方法 里 画 出 这 种 外 观 的 。 代 码 如 下 : 
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override fun onDraw(canvas: Canvas) ( 


super.onDraw (canvas) 


/ LEGES TE E RA padding, AFIR RAAME 
val paddingLeft - paddingLeft 

val paddingTop - paddingTop 

val paddingRight - paddingRight 

val paddingBottom - paddingBottom 


11h ARRIERE 
val contentWidth = width - paddingLeft - paddingRight 
val contentHeight - height - paddingTop - paddingBottom 


/LBLCT- 
exampleString?.let ( 
canvas.drawText( 
it, 
paddingLeft + (contentWidth - textWidth) / 2, 
paddingTop + (contentHeight + textHeight) / 2, 
textPaint 


) 


/ LBILÉTÉR, AE ETE e PE t BÍ IET Rs A 
exampleDrawable?.let ( 
// RERNE AEA 
it.setBounds ( 
paddingLeft, paddingTop, 
paddingLeft + contentWidth, 
paddingTop + contentHeight 


AAA 


it.draw (canvas) 


) 
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代码 中 的 exampleString 和 exampleDrawable 是 在 属性 编辑 器 中 设置 的 属性 值 。 

在 这 段 代码 中 ， 首 先是 获取 控件 上 、 下 、 左 、 右 的 Padding (空白 距离 ) ， 以 计算 内 容 区 
范围 。 下 面 确实 用 它 来 计算 了 内 容 区 的 宽 和 高 ， 那 么 控件 的 内 容 (文本 、 图 像 等 ) 在 显示 时 就 
不 能 超出 这 个 范围 。 然 后 在 画布 canvas 上 画 出 了 文本 。drawTextO 这 个 方法 有 四 个 参数 : 第 一 
个 是 要 画 的 字符 串 ; 第 二 个 是 画 文字 开始 处 的 x 坐标 ; 第 三 个 是 开始 处 的 纵 坐 标 ; 第 四 个 是 一 
个 画笔 对 象 。 要 注意 的 是 , 在 计算 画 文本 的 x 轴 上 的 开始 位 置 时 ,使 用 内 容 区 的 宽度 减 去 了 文 
本 的 宽度 (contentWidth - textWidth ), 但 是 在 计算 y 轴 上 的 开始 位 置 时 , 却 用 了 加 (contentHeight 


+ textHeight) ， 这 是 因为 在 x 轴 上 是 从 左边 开始 画 的， 而 在 y 轴 
上 是 从 底部 开始 画 的 , 这 样 就 使 文字 居中 了 。 最 后 , 调用 drawable 
对 象 ( 这 里 实际 上 是 一 幅 图 像 ) 的 draw0 方 法 ， 画 在 画布 上 。 在 
画 之 前 ， 使 用 方法 setBounds0 设 置 自己 应 处 的 位 置 和 大 小 ， 从 传 
入 的 参数 看 ， 这 个 图 像 会 填充 View 的 整个 内 容 区 。 也 就 是 说 ， 
如 果 这 个 图 像 与 内 容 区 的 长 宽 比 不 一 样 ， 那 么 这 个 图 像 会 变形 。 
图 13-10 是 把 View 设置 为 300dp x 500dp 时 的 样子 。 

onDrawO 里 的 第 一 名 就 是 调用 父 类 的 onDrawQ 这 个 很 重要 ， 
一 般 情 况 下 必须 这 样 做 。 

看 起 来 这 个 方法 并 不 复杂 ， 但 是 依然 有 很 多 疑问 。 比 如 ， 
exampleString 和 exampleDrawable 的 值 是 怎样 传 进来 的 ? 文本 的 
宽度 textWidth 和 高 度 textHeight 是 怎么 计算 出 来 的 ? 画笔 
textPaint 是 什么 ? 为 什么 要 用 它 ? 在 哪里 创建 的 ? 欲 知 谜底 ， 请 
看 下 节 。 


13.2.3 init) AŻ 


FirstCotlinApp 


图 13-10 


在 自 定义 控件 类 中 , 很 多 属性 的 值 都 来 自 界面 构建 器 中 指定 的 属性 , 比如 Padding, 宽度、 


高 度 、exampleString、exampleDrawable( 见 图 13-11) . 


layout width 300dp 
layout height 300dp 
» Layout Margin $2227 
» Padding [?, 20dp, ?, ?, 40dp] 
> Theme 
elevation 
background [ccc 
exampleColor 国 #33b5es 


exampleDimension 24sp 
exampleDrawable Gandroid:drawable/ic menu add 


exampleString Hello, RoundlmageView 


13-11 
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这 些 属性 都 通过 构造 方法 的 “attrs ”参数 传 给 了 控件 。 那 些 内 置 的 属性 (比如 layout. width. 
padding. background 等 ) 会 在 父 类 的 代码 取出 并 保存 ， 见 下 面 这 行 代码 : 


constructor(context: Context, attrs: AttributeSet) : super(context, attrs) 


就 是 “super(contextattrs)” 这 句 完成 的 ， 所 以 调用 getPaddingXXXO、getWidthO 时 会 获取 
到 有 效 的 值 。 非 内 置 属性 (以 example 开头 的 那 几 个 属性 ， 也 就 是 自 定 义 属性 ， 详 见 下 一 节 ) 
就 只 能 由 我 们 自己 处 理 了 。 我 们 先 看 一 下 初始 化 方法 做 了 什么 : 
private fun init(attrs: AttributeSet?, defStyle: Int) ( 
/ LER XERCELE X HERE 
val a = context.obtainStyledAttributes( 


attrs, R.styleable.RoundImageView, defStyle, 0 
) 


LLL EXER, DEHCEHIAII XC 
.exampleString - a.getString(R.styleable.RoundImageView exampleString) 


/ HROCKIBIÉES 

.exampleColor = a.getColor(R.styleable.RoundImageView exampleColor, 
exampleColor) 

LLHBOUCKBIT EX AN 


.exampleDimension = a.getDimension( 
R.styleable.RoundImageView exampleDimension, exampleDimension) 


if (a.hasValue(R.styleable.RoundImageView exampleDrawable)) ( 
/ EROR 
exampleDrawable = 
a.getDrawable(R.styleable.RoundImageView exampleDrawable) 
/ RIAM XE View 的 动 夯 
exampleDrawable?.callback = this 
) 


/ HC EE 


a.recycle() 


// ÜJ& BI X AK BUE 
textPaint - TextPaint().apply ( 
flags = Paint.ANTI ALIAS FLAG //i€H TA 
textAlign = Paint.Align.LEFT //i€E X Ef X 
) 


/LEBUCKIBAE BICI tE, IREKE 
invalidateTextPaintAndMeasurements() 
} 
看 到 以 上 代码 ， 前 面 很 多 疑问 应 该 得 到 解答 了 。 我 们 已 经 知道 ，exampleString 和 
exampleDrawable 的 值 都 是 通过 参数 attrs 传 进来 的 ， 这 些 值 被 放 在 一 个 TypedArray 里 ， 我 们 
可 以 通过 其 资源 id( 自 定义 属性 的 一 个 标记 ) 从 TypedArray 里 取出 来 。 同 时 传 进来 的 还 有 
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exampleDimension 和 exampleColor 的 值 ， 这 两 个 被 用 来 设置 textPaint ， 见 方法 
invalidateTextPaintAndMeasurements(): 
private fun invalidateTextPaintAndMeasurements() { 
textPaint?.]et ( 

/LLEBUFIEKA 
it.textSize = exampleDimension 
/LEBEXCTBBIE 
it.color = exampleColor 
/HRIEEI EIE, THÉ examplestring PXHP ERER 
textWidth = it.measureText (exampleString) 
//RECHEHAH, THÉ examplestring "P XoKIUSUEsRr/e 
textHeight = it.fontMetrics.bottom 


) 


为 什么 这 个 方法 要 单独 拿 出 来 呢 ? 因为 这 段 代码 要 在 其 他 地 方 多 次 用 到 。 比 如 在 设置 文本 
时 ， 因 为 文本 的 内 容 变 了 ， 需 要 重新 计算 文本 的 宽 和 高 ， 所 以 需要 重新 调用 这 段 代 码 。 

初始 化 方法 在 构造 方法 中 被 调用 ， 只 执行 一 次 ， 而 onDraw0 可 能 被 执行 多 次 ， 于 是 我 们 
在 初始 化 方法 中 就 要 准备 好 在 onDraw0O 中 使 用 的 东西 ， 而 不 是 在 onDraw0O 中 现 用 现 准备 ， 提 
高 onDraw0 的 执行 效率 。 

此 类 除了 有 “exampleDimension” 属 性 外 ， 还 有 “_exampleDimension” 属 性 ， 它 俩 如 此 
相似 ， 是 不 是 有 什么 关系 ? 当然 有 关系 了 ! 你 看 不 明白 ,是 因为 RoundImageView 中 有 部 分 代 
码 没 贴 出 来 ， 现 在 到 展示 的 时 候 了 : 

LLRBESANAEBIME RUE 

private var exampleString: String? = null 


private var exampleColor: Int = Color.RED 
private var exampleDimension: Float = Of 


// RIF attr EARI MAHE 

private var textPaint: TextPaint? = null 
private var textWidth: Float = 0f 
private var textHeight: Float = Of 


var exampleString: String? 
get() = _exampleString 
set(value) { 
_exampleString = value 
invalidateTextPaintAndMeasurements () 
) 


var exampleColor: Int 
get() = exampleColor 
set(value) ( 
.exampleColor = value 
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invalidateTextPaintAndMeasurements () 


) 


var exampleDimension: Float 
get() = exampleDimension 
set(value) ( 
.exampleDimension = value 
invalidateTextPaintAndMeasurements () 
) 


var exampleDrawable: Drawable? = null 


这 段 代码 是 类 的 全 部 属性 的 定义 , 前 三 个 是 私有 属性 , 用 于 为 对 应 的 公开 属性 提供 后 台数 
据 支持 。 我们 一 般 理 所 当然 地 认为 用 字段 为 属性 提供 后 台数 据 支 持 , 但 是 Kotlin 不 支持 字段 ， 
所 有 成 员 变量 都 是 属性 〈 也 就 是 对 应 Java 的 getter 和 setter 方法 ) 。 

为 什么 有 的 属性 不 需要 后 台数 据 支 持 而 有 的 需要 呢 ? 拿 exampleString 来 说 ， 它 的 setter 
需要 一 点 特殊 的 处 理 ， 除 了 保存 传 入 的 值 之 外 ， 还 要 调用 一 个 方法 ， 在 这 个 方法 中 会 更 新 
textPaint 的 设置 。 如 果 后 面 直接 给 exampleString 赋值 ， 必 然 会 引起 
invalidateTextPaintAndMeasurements() 的 调用 。 有 时 我 们 就 是 想 单纯 地 为 exampleString 赋值 ， 
而 不 希望 此 方法 被 调用 ， 于 是 就 选择 了 后 台数 据 支持 属性 的 方式 。 如 果 仅 赋值 ， 就 赋 给 
 exampleString. 
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如 果 只 想 在 代码 中 创建 控件 , 用 不 着 为 控件 创建 自 定义 属性 , 所 以 创建 自 定义 属性 纯粹 是 
为 了 能 在 界面 构建 器 中 使 用 。 
要 创建 自 定义 属性 ， 需 要 在 res/values 下 增加 一 个 xml 文件 ， 在 其 中 定义 自 定义 属性 的 名 
字 和 值 的 类 型 。 在 利用 向 导 创 建 自 定义 控件 类 时 ， 自 动 为 我 们 增加 了 一 个 文件 : 
attrs_round_image_view.xml。 这 个 文件 的 内 容 如 下 : 
<resources> 
<declare-styleable name="RoundImageView"> 
<attr name="exampleString" format="string" /> 
<attr name="exampleDimension" format="dimension" /> 
<attr name="exampleColor" format="color" /> 
<attr name="exampleDrawable" format="color|reference" /> 
</declare-styleable> 
</resources> 


最 外 层 元 素 是 “resources”， 固 定 写 法 ， 跟 字符 串 和 style 等 资源 一 样 。 实 际 上 它们 可 以 
放 在 一 起 , 不 过 为 了 让 人 容易 理解 , 一般 就 把 不 同类 型 的 资源 放 在 不 同 的 文件 中 了 。 这 个 文件 
中 的 资源 类 型 是 “declare-styleable”， 为 了 能 在 其 他 地 方 引 用 ， 就 必须 有 名 字 。 这 里 的 名 字 叫 
“RoundImageView”， 与 我 们 的 类 名 相同 ， 其 实 这 不 是 必需 的 ， 也 就 是 说 这 个 资源 与 使 用 它 
的 类 没有 关联 关系 ， 这 个 资源 并 不 是 只 能 被 类 RoundImageView 使 用 。“declare-styleable” 的 
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每 一 个 子 元 素 叫 “attr” Cattribute 的 缩写 ) ， 让 我 们 联想 到 RoundImageView0 构 造 方法 的 参 
数 。 每 个 attribute 都 有 名 字 ， 这 些 名 字 正 是 我 们 在 界面 设计 器 中 为 RoundImageView 指定 的 自 
定义 属性 的 名 字 OLE 13-12) 。 


exampleColor 
exampleDimension 


exampleDrawable Gandroid:drawable/ic menu add 


exampleString Hello, RoundlmageView 
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attr 元 素 值 的 类 型 由 属性 “format” 指 定 : string 是 字符 串 ; dimension 是 数字 表示 距离 ) ; 
color 是 颜色 ， 比 如 “#ccc”; reference 表示 引用 ， 就 是 一 个 对 象 。 如 果 attr 的 值 可 以 在 几 种 类 
型 之 间 选 择 ， 在 类 型 之 间 加 “|” 即 可 。 比 如 ，“colorlreference” 表 示 值 既 可 以 是 一 个 颜色 ， 
也 可 以 是 一 个 引用 ， 可 以 看 到 exampleDrawabled 的 值 类 型 就 是 “colorlreference”， 我 们 在 使 
用 时 为 自 定义 控件 的 这 个 属性 传 入 了 一 幅 图 像 的 引用 “@android:drawable/ ic menu add”。 
自 定义 属性 已 添加 , 如 何 使 用 它 呢 ? 首先 要 在 layout 文件 中 为 控件 指定 这 些 属性 的 值 。 TE 
意 , 这 些 属性 并 不 会 自动 出 现在 自 定义 控件 的 属性 编辑 器 中 ,需要 在 源码 中 手动 添加 ， 具体 如 
下 (在 sample round image view.xml 中 ) : 
Xcom.example.niu.firstcotlinapp.RoundImageView 
android:layout width-"300dp" 
android:layout height-"300dp" 
android:background-"£ccc" 
android:paddingLeft-"20dp" 
android:paddingBottom-"40dp" 
app:exampleColor-"$33b5e5" 
app:exampleDimension-"24sp" 
app:exampleDrawable-"Gandroid:drawable/ ic menu add" 
app:exampleString-"Hello, RoundImageView" /» 


手动 添加 之 后 , 在 属性 编辑 器 中 也 就 能 看 到 了 , 可 以 在 代码 中 随时 把 这 些 属性 的 值 取出 来 
(在 我 们 的 代码 中 ， 是 在 init0 方 法 中 取出 来 的 ) 。 我 们 知道 参数 是 通过 attrs 这 个 参数 传 进 来 
的 ， 在 init0 中 首先 要 做 的 就 是 从 attrs 取得 一 个 TypedArray 对 象 : 

val a = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView, 
defStyle, 0) 

这 个 方法 有 四 个 参数 。 第 一 个 参数 不 用 解释 了 。 第 二 个 参数 是 styleable 资源 的 id， 指 向 
了 在 attrs round image view.xml 中 定义 的 资源 RoundImageView, 这 样 后 面 才 能 通过 自 定义 属 
性 的 名 字 取 得 其 值 。 如 果 没 有 这 个 参数 ， 只 可 以 取得 内 置 的 属性 值 ， 无 法 访问 自 定义 的 属性 。 
第 三 个 参数 是 自 定义 属性 的 默认 值 的 资源 ID。 第 四 个 参数 是 包含 View 某 些 属性 默认 值 的 资源 
id。 后 面 两 个 参数 一 般 用 不 到 。 有 了 TypedArray 对 象 之 后 ， 就 可 以 通过 属性 名 取得 属性 了 ， 
比如 : 


_exampleString = a.getString(R.styleable.RoundImageView exampleString) 
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“exampleString ”这 个 属性 的 值 是 String 类 型 的 ,所 以 调用 TypedArray 的 getStringQ77 1X 
“exampleColor” 的 值 是 一 个 Color 类 型 ， 所 以 调用 方法 getColor0 获 取 。 注 意 ， 其 后 还 有 一 个 
参数 〈 默 认 值 ) ， 如 果 在 TypedArray 中 找 不 到 这 个 属性 ， 就 返回 默认 值 。 


13.2.5 ”作画 


在 计算 机 中 显示 出 来 的 样子 是 用 程序 画 出 来 的 。 当 然 作画 的 代码 是 我 们 写 的 , 由 于 调用 了 
系统 提供 的 API， 因 此 减少 了 很 多 工作 , 但 也 造成 了 所 有 的 程序 界面 都 差不多 ， 比 如 Windows 
系统 中 的 窗口 程序 。 

我 们 总 是 利用 程序 在 内 存 中 先 把 画 画 完 , 然后 把 整 张 图 传 到 显卡 的 显存 中 。 一 旦 传 到 显存 
中 ， 就 会 在 屏幕 上 看 到 。 注 意 ， 实 际 显卡 在 显示 之 前 ， 还 要 将 图 像 合 并 一 下 ， 因 为 同一 时 刻 作 
画 的 不 止 一 个 程序 ， 比 如 同时 可 以 看 到 多 个 窗口 。 上 面 的 窗口 要 盖 住 下 面 的 窗口 ， 所 以 显卡 就 
要 根据 谁 在 上 、 谁 在 下 合并 这 些 图 像 ， 之 后 再 显示 。 当 然 我 们 感觉 不 出 这 个 过 程 ， 因 为 显卡 一 
秒 钟 刷新 至 少 60 次 以 上 。 当 我 们 用 鼠标 拖 着 一 个 窗口 游 走时 ， 这 个 作画 并 显示 的 过 程 在 不 停 地 
快速 反复 执行 。 

所 有 具有 图 形 界面 的 操作 系统 都 提供 了 作画 用 的 API。 可 以 用 代码 画 一 条 直线 、 一 个 矩形 、 

个 椭圆 、 一 个 正 圆 、 一 个 三 角形 、 一 个 贝 塞 而 曲线 , 还 可 以 用 一 种 颜色 填充 一 个 封闭 的 形状 ， 
比如 和 矩形 或 圆 等 。 在 填充 时 ， 还 可 以 用 颜色 渐变 的 方式 。 

因为 画图 时 要 先 画 到 内 存 中 ,所 以 需要 一 块 内 存 ,也 就 是 画布 (Canvas)。View 类 的 onDraw0 
方法 传 入 了 一 个 参数 canvas， 它 是 与 当前 View 所 关联 的 ， 是 供 我 们 作画 的 一 块 内 存 (当然 实 
际 上 不 仅 是 内 存 这 么 简单 ， 暂 时 先 把 它 理解 为 一 块 内 存 ) 。 如 果 所 作 的 画 超出 了 View 的 实际 
范围 ， 就 看 不 到 超出 的 部 分 了 ， 所 以 作画 时 应 取得 View 的 Width 和 Height， 并 考虑 Padding 
(内 部 空白 ) 。 

再 回头 看 一 下 onDraw0 里 面 的 代码 。 注 意 ， 画 文字 和 画图 像 的 API 差别 很 大 ， 画 文字 需 
要 准备 一 支 笔 (paint) ， 实 际 上 这 支 画 笔 不 是 仅仅 用 来 画 文字 的 ， 还 可 以 用 来 画 线 条 (直线 或 
曲线 ) ， 画 各 种 形状 。 另 外 ， 还 可 以 设置 这 支 笔 的 参数 ， 比 如 颜色 、 线 条 粗细 、 是 否 开启 抗 锯 
齿 (平滑 效果 ) 。 由 于 要 画 文 字 ， 因 此 还 设置 了 字体 大 小 、 文 字 的 对 齐 方式 等 。 

下 面 我 们 用 这 种 笔画 一 个 形状 ， 比 如 为 自 定义 控件 增加 边框 。 很 简单 ， 我 们 只 需要 画 一 个 
比 控件 小 一 个 像素 的 矩形 即 可 。 在 onDraw( 方 法 的 最 后 增加 下 面 几 句 : 

/ / BLAME 

textPaint?.let { 

// REBUEBIEEAU Án 
it.setStrokeWidth(10.0f) 

// BUE RIBEEACTIAE 
it.setStyle(Paint.Style.STROKE) 

/ LAB] MIS ERARD -PREIE AEH KAE 


canvas .drawRect (Rect (1, 1, width - 2, height - 2), it) 


) 


执行 效果 如 图 13-13。 注 意 ， 不 必 运 行 App， 在 界面 设计 器 的 预览 中 就 能 看 到 效果 。 如 果 
改 了 代码 ， 想 看 到 效果 就 必须 编译 一 下 ， 如 图 13-14 所 示 。 
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Clean Project 
Rebuild Project 


图 13-13 图 13-14 


2.3 创建 图形 图 像 控 件 


很 多 登录 界面 上 的 图 像 都 是 圆 形 的 ， 如 图 13-15 所 示 。 控 件 中 
的 图 像 显 示 为 圆 形 ， 圆 之 外 的 图 像 被 剪 切 掉 。 注 意 ， 系 统 中 的 图 像 
控件 ImageView 当前 是 做 不 到 这 个 效果 的 。 我 们 前 面 创建 的 自 定 
义 控件 叫 作 RoundImageView， 就 是 为 现在 做 准备 的 。 下 面 我 们 就 
改进 一 下 这 个 类 ， 让 它 能 显示 圆 形 图 像 。 

RoundImageView 是 直接 从 View 派生 的 , 而 不 是 从 ImageView 
派生 的 ， 其 实 是 可 以 从 ImageView 派生 的 ， 但 是 更 麻烦 。 因 为 
ImageView 内 部 已 经 处 理 了 图 像 的 显示 ， 还 支持 图 像 的 显示 模式 、 add 
是 否 居 中 以 及 它 特 有 的 Getter 和 Setter。 我 们 如 果 接 管 了 图 像 绘 制 就 需要 自己 实现 这 些 需 求 ， 
以 及 那些 Getter 和 Setter， 很 麻烦 ! 同时 ， 从 View 派生 来 显示 图 像 也 不 算 难 ， 因 为 现在 就 能 
显示 了 ， 而 且 我 们 只 需要 把 图 像 显示 在 控件 中 央 即 可 ， 也 不 必 支持 变 形 ， 所 以 还 是 从 View 派 
生 更 好 。 

先 介绍 一 下 实现 原理 : 利用 Paint 对 象 可 以 画 圆 ， 也 可 以 画图 像 ， 但 是 把 图 像 绘 在 一 个 圆 
的 范围 内 、 超 出 圆 的 部 分 被 切 掉 并 不 是 那么 简单 ， 这 要 用 到 着 色 器 (Shader) 。 利 用 图 像 创建 
着 色 器 ， 把 着 色 器 设置 给 Paint， 然 后 用 Paint 画 圆 ， 就 画 出 了 圆 形 图 像 。 过 程 大 致 如 下 : 

bitmapShader = BitmapShader(bitmap ,...) 


bitmapPaint - Paint() 
bitmapPaint.setShader (bitmapShader) 


canvas.drawCircle(x, y, radius, bitmapPaint) 


着 色 器 是 OpenGL 中 用 于 图 像 处 理 的 组 件 , 要 想 了 解 着 色 器 , 请 参看 OpenGL 2.0+ 的 开发 手册 。 


我 们 创建 一 个 新 的 Paint 来 画 圆 形 图 像 , 并 把 它 保 存在 RoundImageView 的 属性 bitmapPaint 
中 。 我 们 除了 画图 像 外 ， 还 要 在 其 外 面 画 一 个 圆圈 ， 所 以 需要 再 准备 一 个 Paint， 命 名 为 
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borderPaint。 这 个 Paint 就 不 需要 设置 着 色 器 了 ， 因 为 它 不 需要 剪 切 ， 只 要 提前 准备 好 这 两 个 
Paint, fF onDraw0 中 编写 如 下 代码 即 可 : 


override fun onDraw(canvas: Canvas) ( 


super.onDraw (canvas) 


bitmapPaint?.Jet ( 
/ / tE 
canvas.drawCircle(getWidth() / 2f,height / 2f, borderRadius, 
borderPaint) 
// BER 
canvas.drawCircle(getWidth() / 2f,height / 2f, drawableRadius, 
bitmapPaint) 
} 
} 


上 述 代码 主要 是 利用 两 个 Paint 在 画布 上 画 了 两 个 圆 。drawCircle0 (mA) 方法 有 四 个 参 
数 : 第 一 个 是 圆心 的 x 坐标 ; 第 二 个 是 圆心 的 y 坐标 ; 第 三 个 是 圆 的 半径 ; 第 四 个 是 要 使 用 的 
画笔 。 图 像 和 边框 都 要 在 控件 中 居中 ， 所 以 圆心 都 是 控件 的 中 心 点 。 在 执行 onDraw0 之 前 ， 
我 们 需要 准备 好 borderPaint (边框 画笔 、borderRadius (边框 半径 ) 、bitmapPaint〈 图 像 画 
笔 ) 、drawableRadius (图像 半径 ) 。 下 面 对 这 四 个 变量 做 一 下 解释 。 


® borderRadius 
边框 是 紧 贴 着 控件 的 边缘 来 画 的 ， 所 以 根据 控件 的 大 小 来 计算 mBorderRadius。 在 控件 的 
宽 和 高 中 取 一 个 最 小 的 ， 然 后 除 以 2: 


borderRadius = Math.min((height - borderStrokeWidth) / 2f, 
(width - borderStrokeWidth) / 2f) 


这 里 使 用 了 数学 函数 min0， 返 回 两 个 参数 中 最 小 的 一 个 。 


* drawableRadius 
图 像 需要 画 在 边框 内 ， 空 出 边框 线 的 位 置 ， 所 以 其 半径 要 小 一 点 ， 应 是 边框 线 的 宽度 
(borderStrokeWidth) ， 同 时 还 要 考虑 内 部 空白 (Padding) 。 计 算 这 个 值 的 代码 如 下 : 


11 FR ENRERE IR 
val drawableRect = RectF( 
borderStrokeWidth + paddingLeft, 
borderStrokeWidth + paddingTop, 
width - borderStrokeWidth - paddingRight, 
height - borderStrokeWidth - paddingBottom 
) 


LL HEBEBIBUE t PUBEHTID AP 48 
drawableRadius - Math.min(drawableRect.height() / 2f, 
drawableRect.width() / 2f) 


首先 创建 了 一 个 矩形 对 象 drawableRect. RectF 是 用 于 存储 矩形 的 参数 的 ， 具 体 如 下 : 
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public class RectF implements Parcelable { 
public float left; 
public float top; 
public float right; 
public float bottom; 


其 中 ，Rect 是 Rectangle 的 简写 ， 后 面 带 的 “F” 表 示 其 变量 类 形 都 是 float 型 的 。 其 构造 
方法 需要 四 个 参数 ， 对 应 四 个 属性 ， 分 别 表示 矩形 x 上 的 左边 位 置 、y 上 的 顶部 位 置 、x 上 的 
右边 位 置 、y 上 的 底部 位 置 。 我 们 在 计算 这 四 个 位 置 时 考虑 了 padding 的 因素 。width 是 控件 的 
宽 ，height 是 控件 的 高 。 至 于 borderStrokeWidth 的 值 ， 是 从 attrs 中 传 进来 的 ， 是 我 们 自 定义 
的 属性 。 


* borderPaint 
这 支 画笔 很 简单 ， 在 初始 化 时 做 了 如 下 处 理 : 


/ / BJEE IT ERI 

borderPaint - Paint() 

/LLRUBAINIUE 

borderPaint.setStyle (Paint.Style.STROKE) 
/LBAIERHE TRUE 
borderPaint.setFlags(Paint.ANTI ALIAS FLAG) 
// BEER 

borderPaint.setColor (borderColor) 

/ / EBUHERIIE DERI 

borderPaint.setStrokeWidth (borderStrokeWidth) 


剩 下 的 就 是 在 onDraw0 中 使 用 它 了 。 


* bitmapPaint 

这 个 画笔 的 主要 特点 是 需要 一 个 着 色 器 ， 而 这 个 着 色 器 是 由 要 画 的 位 图 创建 的 : 

//L ULRCEEE ER, ES RUB —INESTUSMI TEIBUTT BEER, 

// RES Windows BERI BEBE, BERERA 

bitmapShader - BitmapShader(bitmap, Shader.TileMode.CLAMP, 
Shader.TileMode.CLAMP) 

// EIE PIU 

bitmapPaint - Paint() 

/LHEBEES EB 

bitmapPaint.setShader (bitmapShader) 


剩 下 的 也 是 在 onDraw0 中 使 用 它 了 。 

调用 着 色 器 的 构造 方法 时 ， 传 入 的 第 一 个 参数 bitmap 是 一 个 位 图 对 象 ， 是 通过 attrs 中 传 
进来 的 。 但 是 attrs 传 进来 的 是 一 个 Drawable 对 象 ,我 们 必须 把 它 转 成 Bitmap 对 象 。 由 Drawable 
转 成 Bitmap 并 不 是 那么 简单 ， 下 面 我 们 详细 解释 一 下 。 
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13.3.1 将 Drawable 转 成 Bitmap 


Bitmap 就 是 位 图 ， 也 叫 栅 格 图 ， 它 里 面 保存 的 是 图 像 的 所 有 像素 (一 个 像素 由 多 个 字 节 
RR) 。 像 素 其 实 就 是 颜色 。 我 们 都 知道 自然 界 有 三 原色 : 红 、 绿 、 蓝 。 只 要 这 三 原色 每 个 有 
不 同 的 深度 , 混合 起 来 就 能 组 成 不 同 的 颜色 。 在 计算 机 中 也 一 样 , 一 个 颜色 也 是 由 三 原色 组 成 
Hj, 一般 一 个 原色 占 一 个 字 节 ， 按 RGB GRK) 顺序 排列 ， 三 个 字 节 一 起 组 成 一 个 颜色 ， 
每 个 原色 在 计算 机 中 叫 作 一 个 通道 ， 每 个 通道 的 值 都 是 0 到 255， 三 个 通道 各 取 不 同 的 值 进行 
组 合 〈 混 色 ) 。 所 有 通道 的 值 都 是 0 时 ， 这 个 颜色 就 是 纯 黑 ;， 如 果 都 是 FF， 这 个 颜色 就 是 纯 
白 ; 如 果 通道 是 0 而 其 余 两 个 通道 都 是 FF， 则 为 纯 红 ; 如 果 三 个 通道 的 值 都 相同 ， 就 是 某 
种 程度 的 灰色 。 仅 用 R、G、B 三 通道 是 不 能 表示 透明 的 , 所 以 一 般 用 四 个 通道 表示 一 个 颜色 : 
A、R、G、B。 其 中 ，A (Alpha) 是 用 于 表示 透明 程度 的 ， 占 一 个 字 节 ， 值 越 小 越 透明 ， 为 0 
时 完全 透明 ， 为 255 时 完全 不 透明 。 我 们 前 面 所 使 用 的 图 像 〈 比 如 res/drawable/female .png) 
就 属于 位 图 , 虽然 这 两 个 png 文件 中 的 像素 并 不 是 如 上 面 所 说 的 方式 表示 的 , 但 实际 上 是 因为 
png 文件 是 位 图 压缩 后 的 形式 , 解码 后 放 在 内 存 中 的 图 像 数 据 就 变 成 了 上 面 所 说 的 那样 。 所以， 
我 们 常见 的 图 像 格式 如 png. jpg. gif 等 都 属于 位 图 。 

与 位 图 相对 的 另 一 种 图 像 是 矢量 图 。 矢量 图 里 存 的 是 如 何 画 出 一 幅 图 的 代码 , 而 不 是 各 像 
素 的 颜色 ,显示 矢量 图 其 实 就 是 执行 代码 把 它 画 出 来 这样 带 来 的 好 处 是 缩放 时 不 失真 , 坏处 
是 表现 太 复杂 的 图 像 有 难度 , 而且 显示 的 时 候 也 很 慢 , 一 般 只 显示 比较 简单 的 线条 、 形 状 或 它 
们 的 组 合 。Android 的 Drawable 资源 对 这 两 种 图 像 都 支持 ， 但 是 Drawable 所 代表 的 东西 不 限 
于 图 像 ， 能 被 绘制 的 东西 都 是 ， 比 如 颜色 ， 所 以 要 区 分 Drawable 与 图 像 这 两 种 概念 之 间 的 
差别 。 

我 们 为 控件 自 定义 了 一 个 属性 “drawable”， 用 于 在 界面 构建 器 中 设置 要 显示 的 内 容 (在 
attrs_round image view.xml 中 ) : 


<attr name="drawable" format="color|reference" /> 


从 format 的 值 可 以 看 到 ， 这 个 属性 不 但 可 以 传 入 图 像 ， 也 可 以 传 入 颜色 。 注 意 ，Bitmap 
类 与 Drawable 类 是 不 同 的 ， 不 能 以 类 型 转换 的 方式 把 Drawable 对 象 转 成 Bitmap 。 

如 果 传 入 的 是 一 幅 图 像 ， 那 么 在 内 存 中 就 是 一 个 BitmapDrawable 类 型 的 实例 ， 此 时 直接 
调用 BitmapDrawable 的 方法 getBitmapO 即 可 得 到 Bitmap: 

if (drawable is BitmapDrawable) { 

/LLPBBRERR ASIE, MRA IUE — NITE Drawable, ARHI EJE 
bitmap - (drawable as BitmapDrawable).bitmap 

} 

注意 ， 此 时 Bitmap 宽 和 高 就 是 所 传 入 图 像 的 宽 和 高 。 

当 传 入 的 是 一 个 颜色 而 不 是 图 像 时 , 在 内 存 中 就 是 一 个 ColorDrawable 实例 。 转 换 Bitmap 
稍微 复杂 点 。 需 要 先 创 建 一 个 Bitmap 的 实例 , 然后 创建 一 个 画布 (Canvas), 再 将 ColorDrawable 
画 到 这 个 画布 上 , 因为 画布 关联 了 位 图 , 所 以 实际 上 就 画 到 了 位 图 上 .注意 , 此 时 创建 的 Bitmap 
的 宽 和 高 只 需 占 一 个 像素 即 可 ， 因 为 这 个 Bitmap 是 用 来 创建 着 色 器 的 。 着 色 器 被 设置 到 Paint 
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中 ，Paint 在 画 圆 时 ， 会 对 着 色 器 进行 缩放 ， 以 适应 要 画 的 圆 的 大 小 。 由 于 只 有 一 种 颜色 ， 因 
此 任 它 怎么 缩放 也 不 会 影响 显示 效果 。 代 码 如 下 : 
if (drawable is ColorDrawable) { 

// AUGE — NEUES, MIEJEE — INE RIRE AIDE — NIE Bitmap, 

// ERER E SIRE ARGB Hili, Niih 8 个 字 芳 

bitmap = Bitmap.createBitmap(l, 1, Bitmap.Config.ARGB_8888) 

11RA F URRA drawable PHAR, Br UA RENE EM, 

//ff drawable MAJEE, ZERERA T tAE 

val canvas = Canvas (bitmap) 

// BERME, BT Ekat 

(drawable as ColorDrawable).setBounds(0, 0, canvas.width, canvas.height) 

(drawable as ColorDrawable) .draw (canvas) 


) 


如 果 传 入 的 是 其 他 类 型 的 Drawable， 那 么 处 理 方式 与 ColorDrawable 类 似 ， 需 要 先 创建 一 
个 Bitmap 实例 ， 然 后 把 Drawable 的 内 容 画 上 去 。 注 意 这 个 Bitmap 的 宽 和 高 必须 与 Drawable 
实际 的 宽 和 高 相同 ， 获 取 Drawable 的 宽 和 高 用 其 属性 intrinsicWidth 和 intrinsicHeight。 代 码 
如 下 : 
drawable?.let ( 
bitmap = Bitmap.createBitmap (it.intrinsicWidth, 
it.intrinsicHeight, Bitmap.Config.ARGB 8888) 
// 位 膨 四 必须 要 序 drawable PHAR, Ar UA JENE EM, 
// ff drawable MAJME, KERERE T hz ELE 
val canvas - Canvas (bitmap) 
// BERRIKI, BRT ELNE 
it.setBounds (0, 0, canvas.width, canvas.height) 
it.draw (canvas) 
/ HB ERNE 
a.recycle() 
) 
从 Drawable 转换 出 来 的 位 图 会 用 来 创建 着 色 器 , 着 色 器 被 设置 给 mBitmapPaint 画 圆 形 图 ， 
但 是 在 画 圆 形 图 时 , 目标 区 域 与 Bitmap 本 身 的 大 小 和 宽 高 比 可 能 是 不 同 的 ,所 以 要 进行 缩放 。 
这 时 需要 对 着 色 器 进行 变换 ， 要 用 到 变换 矩阵 。 下 面 仔细 来 研究 一 下 如 何 创 建 这 个 矩阵 。 


13.3.2 ”变换 矩阵 


在 OpenGL 中 ,图 像 的 缩放 、 变 色 、 移 位 等 都 叫 变换 。 这 些 变 换 对 图 像 中 每 个 像素 进行 了 
一 定 的 运算 ,比如 移 位 ,因为 是 三 维 空间 ,要 把 图 像 从 A 坐标 (xl,y1,z1) 移 到 B 坐标 (x2,y2,z2)， 
就 是 把 图 像 每 个 顶点 (比如 三 角形 有 三 个 顶点 , 六 面体 有 8 个 顶点 ) 的 x、y、z 上 的 值 加 减 某 
个 值 ， 因 为 有 三 个 分 量 ， 所 以 都 是 以 矩阵 的 形式 表示 。 要 进行 变换 ， 就 要 准备 一 个 矩阵 。 当 然 
我 们 是 二 维 变换 ， 不 是 三 维 的 ， 但 是 矩阵 是 一 样 的， 只 不 过 变换 时 z 坐标 不 变 。 
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我 们 要 进行 的 变换 是 缩放 和 位 移 ， 还 要 保持 图 像 的 宽 高 比 ,并 且 要 居中 ,所 以 我 们 要 考虑 
容纳 图 像 的 矩形 与 图 像 大 小 之 间 的 关系 以 进行 图 像 缩放 比例 的 计算 。 代 码 如 下 : 


val scale: Float 
var dx = 0f// HRE x fil EJPASIUAZEE 
var dy = 0f// HRE y # EFG BE 


//EZEZKIE, AFRE GE 
val mShaderMatrix = Matrix () 
mShaderMatrix.set (null) 
LT IRBIÉR ERRAKI A, RNE TRUE PUR TERRAM EHEHIE AI BIER eT e l PPAR 
if (bitmapWidth * drawableRect.height() « drawableRect.width() * bitmapHeight) ( 
/ LIRE HERK TF HIERHER, BY PNR E IEEE SES HC BVE R BEHA, 
LLHBERHEIEBISERE IARE ETE RE 
Scale = drawableRect.height() / bitmapHeight as Float 
//LBIBIBUIEAMBIE, BEDAE x f ERRE 
dx = (drawableRect.width() - bitmapWidth * scale) * 0.5f 
) else ( 
/ LAUR STE I REA TF AREE E, ENRE WATKI EREZA EET RETRLRT, 
11 PRITE E bolit PENRE RIBBE 
scale = drawableRect.width() / bitmapWidth as Float 
11 ARRA IIEERE, MAA y B EERI E 
dy = (drawableRect.height() - bitmapHeight * scale) * 0.5f 
} 


// BEREE x WM y ME A 
mShaderMatrix.setScale (scale, scale) 
// BEREE x WM y MERE, ARERR P 
mShaderMatrix.postTranslate( 
(dx + 0.5£).toInt() + borderStrokeWidth, 
(dy + 0.5£).toInt() + borderStrokeWidth 
) 


/LHEEIBAEDERE BEAT IEEE 


bitmapShader!!.setLocalMatrix (mShaderMatrix) 


13.3.5 自 定 义 属性 的 改动 
对 原先 的 自 定义 属性 做 了 改动 ， 现 在 的 自 定义 属性 如 下 : 


<resources> 
<declare-styleable name="RoundImageView"> 
<attr name-"borderWidth" format="dimension" /> 
<attr name-"borderColor" format="color" /> 
<attr name="drawable" format="color|reference" /> 
</declare-styleable> 
</resources> 
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borderWidth 是 线条 宽度 ，borderColor 是 线条 颜色 ，drawable 是 要 画 成 圆 形 的 图 像 。 现 在 
我 们 把 登录 页 面 的 头像 改 为 使 用 imageViewHead 类 ( 见 图 13-16) 。 


Component Tree 
Iii scrollView 
v", layout 


KX imageViewHead 
Ab editTextName 
如 editTextPassword 


13-16 
fragment login.xml 中 使 用 自 定 义 控件 的 代码 如 下 : 


Xcom.example.niu.firstcotlinapp.RoundImageView 
android:id-"G*id/imageViewHead" 
android:layout width-"100dp" 
android:layout height-"100dp" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:layout marginEnd-"8dp" 
android:background-"60 android: color/ holo blue bright" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 


app:layout constraintTop toTopOf-"parent" 
app:borderColor-"Qandroid:color/ holo green dark" 
app:borderWidth-"2dp" 
app:drawable-"Gdrawable/female" /> 
如 果 看 不 到 图 像 效果 ， 可 以 重新 编译 工程 ， 但 应 该 会 在 LoginFragment 中 出 现 编译 错误 ， 
那 是 因为 我 们 改变 了 imageViewHead 这 个 控件 的 类 型 (从 View 改 为 RoundImageView) ， 把 
操作 imageViewHead 的 代码 删 掉 即 可 。 


13.3.4 类 的 所 有 代码 
类 的 所 有 代码 如 下 : 


package com.example.niu.firstcotlinapp 


import android.content.Context 

import android.graphics.* 

import android.graphics.drawable.BitmapDrawable 
import android.graphics.drawable.ColorDrawable 
import android.graphics.drawable.Drawable 
import android.util.AttributeSet 


import android.view.View 


y** 
* EAE XAHERSIBUERIETELT 
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wx 
class RoundImageView : View { 
private var borderColor = Color.RED 
// ZEB drawable HRGB 
private var drawable: Drawable? = null 
LLBUUNIUBIBS POIDERFIETUPPPIEBEEIÉ, HUEN public 
public var drawable: Drawable? 
get() ( 
return this. drawable 
) 
set(value) ( 
this. drawable - drawable 
//A Drawable XI $ 6X Bitmap XR, HT Él/& BitmapShader 
getBitmapFromDrawable( drawable)?.let ( 
//RE REIR EAE 
bitmapWidth = it.width 
bitmapHeight = it.height 


LL BEI l PIB E E HIRE BIERE 
updateShaderMatrix() 
/LRUbWÓBAL ERRER EREI CIIEIE T, SIIREDEETASBI TO 


invalidate() 


) 


1/1 ERRE 

private var bitmapWidth: Int = 0 

11 ERR 

private var bitmapHeight: Int = 0 

// VERRI, FERI E 

private var drawableRadius: Float = Of 
/ LBEURERI, FERE 

private var borderRadius: Float = 0f 
// HERI ERE 

private var borderStrokeWidth = 1f 
V/ŽËR, BEE hE RNR HK iE 

private var bitmapShader: BitmapShader? = null 
4/1 AF E h E ENR DE 

private var bitmapPaint: Paint? = null 
// A F E h ERAR BITE 


private var borderPaint: Paint? = null 


constructor (context: Context) : super (context) { 
init (null, 0) 
} 


constructor (context: Context, attrs: AttributeSet) : super (context, attrs) { 
init(attrs, 0) 
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constructor(context: Context, attrs: AttributeSet, defStyle: Int) 
super (context, attrs, defStyle) { 
init(attrs, defStyle) 
) 


private fun init(attrs: AttributeSet?, defStyle: Int) ( 
LHBEBERCEL EXER 
val a = context.obtainStyledAttributes( 
attrs, R.styleable.RoundImageView, defStyle, 0) 


/ / BRLEK E 

borderColor - a.getColor( 
R.styleable.RoundImageView borderColor, 
borderColor) 

// EEBGUERB ERE RE) 

borderStrokeWidth = a.getDimension( 
R.styleable.RoundImageView borderWidth, 
borderStrokeWidth) 


/ LERORTÉR 
if (a.hasValue(R.styleable.RoundImageView drawable)) ( 
this. drawable = a.getDrawable (R.styleable.RoundImageView drawable) 


} 
VITAMEN attrs HRAT, RIT FE MEER. 


a.recycle() 


if (drawable !- null) ( 
//A Drawable XRH Bitmap X/55,. /H T f£ BitmapShader 
//Drawable RÆ Android SDK X T WEBB $ A86, 
/ RRR EIEESEITEREIE Bitmap (EIRA 


val bitmap = getBitmapFromDrawable (drawable) ?: return 


// RE FERRIE 
bitmapWidth = bitmap!!.getWidth() 
bitmapHeight = bitmap!!.getHeight() 
// ERER, SES RUB NETUS T EBUP PEL, 
// 可 以 参考 Windows BRAI FARR 
V/B BRER FA 
bitmapShader = BitmapShader( 
bitmap!!, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP) 


/ / BIET PIRE 

bitmapPaint - Paint() 
/HBEBESEBEAHE 
bitmapPaint!!.setShader (bitmapShader) 


// UJ BILE RII 
borderPaint - Paint() 


193 


Android 10 Kotlin 编程 通俗 演义 


// RERNA 
borderPaint!!.setStyle(Paint.Style.STROKE) 


// BUUTEREEUPIBAUR 
borderPaint!!.setFlags(Paint.ANTI ALIAS FLAG) 


// REGERE 
borderPaint!!.setColor (borderColor) 


// REDEK RR HA 
borderPaint!!.setStrokeWidth (borderStrokeWidth) 


} 


override fun onDraw(canvas: Canvas) { 
super.onDraw (canvas) 


bitmapPaint?.let ( 
/ / bE 
canvas.drawCircle(getWidth() / 2f, 
height / 2f, borderRadius, borderPaint); 
// BER 
canvas.drawCircle(getWidth() / 2f, 
height / 2f, drawableRadius, bitmapPaint); 


) 


private fun getBitmapFromDrawable (drawable: Drawable?): Bitmap? { 
if (drawable -- null) ( 
return null 


) 


if (drawable is BitmapDrawable) ( 
/L LIBER DEI, VUREA MER M INÓTÉI Drawable, EEtEEHOfgr EIER IR] 
return drawable.bitmap 


) 


/ I RU EIE (RA res/drawable FRR) , AEREBEAE Je —ÁÀ 
try ( 
val bitmap: Bitmap 


if (drawable is ColorDrawable) ( 
4L PRU —INERÉ, WENEN EMRE — NREN Bitmap, 
/LHBIERBIE SSH ARGB Mič, SE IET o VEE 
bitmap - Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB 8888) 
) else ( 
4L RURUE ERES Drawable, MIÉJ&E fs 5 E EIFE AINE IT 
bitmap - Bitmap.createBitmap( 
drawable.intrinsicWidth, 
drawable.intrinsicHeight, 
Bitmap.Config.ARGB 8888) 
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// 位 图 中 必须 要 育 drawable (PÉSEDE, HUA AEEA, 
//ff drawable WPJ E, Skis ERAR T fr ELE 
val canvas = Canvas (bitmap) 
1/ RERIK, EAN ERINE 
drawable.setBounds (0, 0, canvas.width, canvas.height) 
drawable .draw (canvas) 
return bitmap 
} catch (e: OutOfMemoryError) { 
//4RARFTEH, EP] null 


return null 


) 
/ LT tt ETRIE BIERE 


private fun updateShaderMatrix() { 
/L EIESTERM E FEA padding, HT il SEARBEAMDCHE 
val paddingLeft - paddingLeft 
val paddingTop - paddingTop 
val paddingRight - paddingRight 
val paddingBottom - paddingBottom 


LT BEHERIHH E, EEIE MERRIA REK 
borderRadius - Math.min( 
(height - borderStrokeWidth) / 2f, 
(width - borderStrokeWidth) / 2f 
) 


/ HAE EIBEEEBUAMIBHE, fr PIT BEREH TIE, 

11B PIECEM E EH EN, ILZE padding HAA 

val drawableRect = RectF( 
borderStrokeWidth + paddingLeft, 
borderStrokeWidth + paddingTop, 
width - borderStrokeWidth - paddingRight, 
height - borderStrokeWidth - paddingBottom 

) 

41 it BE AFE 

drawableRadius = Math.min( 
drawableRect.height() / 2f, 
drawableRect.width() / 2f 

) 

val scale: Float 


var dx = Of// HRE x MEHKE 
var dy = Of//H/ff it y MEHKE 


// EBRIE, HITIHEEIBIAEIURIIEER 
val mShaderMatrix = Matrix () 
mShaderMatrix.set (null) 


LT EBIERE AER IE, OM TEETRUE PIER TELAM EHE HU AUN BUE E EIT E PEE 
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if (bitmapWidth * drawableRect.height() « drawableRect.width() * 


bitmapHeight) { 


LLUR EIU REA TII BHEK E», PNR DUET HIR PEZA BHE REN], 


11BIT E He iH R IRA RUE 


scale = drawableRect.height() / bitmapHeight.toFloat() 


// BIBIB ILAMBIE P, 所 以 计算 x HERRIE 


dx = (drawableRect.width() - bitmapWidth * scale) * 0.5f 


} else ( 


1/1/40 REIR KI EN FABER, MENRE hI EPE SE HERI BEHER REHAN, 


LL RITER b G iH A PENRE HI LAT 


scale = drawableRect.width() / bitmapWidth.toFloat () 


LL BIBIBLILINEERE, BAIR y H ERHI E 


dy = (drawableRect.height() - bitmapHeight * scale) * 0.5f 


} 
// BEREE x WA y WB 


mShaderMatrix.setScale (scale, scale) 
// BEREE x WP y WERE, ORERE P 
mShaderMatrix.postTranslate( 
(dx + 0.5f) .toInt() + borderStrokeWidth, 
(dy + 0.5£).toInt() + borderStrokeWidth 
) 
/LHSSEBRAEIEIEBEA EE 
bitmapShader!!.setLocalMatrix (mShaderMatrix) 
) 
/LÓSTETEXHNRPILI, ER it PENR BVIE: 
override fun onSizeChanged(w: Int, h: Int, oldw: 
super.onSizeChanged(w, h, oldw, oldh) 
updateShaderMatrix() 


) 


Int, oldh: Int) ( 


注意 类 的 属性 drawable 和 _drawable 之 间 的 关系 ，_drawable 为 drawable 提供 后 台数 据 


支持 。 
到 这 里 ， 自 定义 控件 就 介绍 完了 。 
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我 们 这 本 教程 的 最 终 目 标 是 要 模仿 出 一 个 QQApp。 

参考 QQ， 其 主页 面 显示 的 是 三 个 Tab 页 面 ， 分 别 是 “消息 ”“ 联 系 人 ”和 “动态 ”。 这 
三 个 页 面 中 都 使 用 了 共同 的 控件 : 列表 控件 。 列 表 控 件 在 各 种 App 中 随处 可 见 ， 是 Android 
中 非常 重要 的 一 个 控件 。 

原始 的 列表 控件 类 是 ListView, 新 的 列表 控件 类 是 RecyclerView. 两 者 的 基本 用 法 差别 不 
大 ,但 RecyclerView 的 使 用 更 复杂 一 点 ， 在 功能 上 RecyclerView 比 ListView 强大 一 些 ， 所 以 
我 们 选择 RecyclerView， 之 后 再 学 习 ListView 也 是 毫 无 障碍 的 。 


140.1. 基本 用 法 


在 Android 中 ， 除 了 各 种 Layout 控件 ， 只 要 是 能 包含 多 个 子 控件 的 控件 ， 其 所 显示 的 子 
控件 的 数量 和 子 控件 的 内 容 都 是 通过 Adapter (适配器 ) 提供 的 。 通 过 引入 Adapter， 这 些 控件 
具备 了 显示 与 数据 分 离 的 架构 (MVC) o 

RecyclerView 中 的 一 个 条 目 就 是 一 个 子 控件 , 但 对 子 控件 的 内 容 是 什么 、 子 控件 如 何 响应 
用 户 事件 完全 不 关心 。 RecyclerView 只 负责 显示 、 排列、 滚动 子 控件 。 也 就 是 说 ,RecyclerView 
只 实现 管理 多 个 条 目 ， 而 不 管 每 条 显示 什么 。 实 际 上 ， 每 子 控件 是 由 Adapter 创建 的 ， 也 是 由 
Adapter 设置 的 内 容 。 

RecyclerView 与 Adapter 之 间 的 关系 是 : RecyclerView 在 显示 一 条 之 前 ， 先 调用 Adapter 
的 某 个 方法 获取 总 条 数 ; 再 调用 Adapter 的 某 个 方法 创建 这 个 条 目的 子 控件 , 然后 调用 Adapter 
的 某 个 方法 将 这 一 条 目 要 显示 的 数据 设置 到 子 控件 中 。 这 些 代 码 是 需要 我 们 实现 的 , 所 以 最 终 
由 我 们 决定 RecyclerView 中 的 条 目 数 和 条 目 内 容 。RecyclerView 最 基本 的 用 法 就 是 先 从 
Adapter 派生 一 个 子 类 ， 实 现 其 中 的 方法 ， 再 将 Adapter 的 实例 设置 给 RecyclerView， 由 
RecyclerView 调用 Adapter 中 的 方法 。 

以 上 基本 用 法 完全 适用 于 ListView! 
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14.2 显示 多 条 简单 数据 


我 们 先 从 最 简单 的 开始 ， 显 示 多 条 文本 。 


14.2.1 添加 新 页 面 
根据 前 面 所 说 的 基本 用 法 ， 我 们 应 从 Adapter 派生 一 个 子 类 。 但 在 这 之 前 ， 我 们 需要 把 显 
示 列 表 的 页 面 创建 出 来 ， 所 以 先 添加 一 个 新 的 Fragment ( 见 图 14-1) o 


SIT 
» [} Fragment (List) 
» [à Fragment (with ViewModel) 


» [l Fragment (witha +1 button) | 
» [3; Modal Bottom Sheet 


(f ur Component 
14-1 
选择 Fragment(Blank) 项 。 我 们 使 用 一 个 空白 Fragment， 自 行 添加 控件 。 这 个 页 面 将 来 要 


用 于 显示 音乐 列表 ， 所 以 命名 为 MusicListFragment (AP 14-2) 。 
单 击 “Finish” 按 钮 后 增加 了 两 个 文件 : MusicListFragment.java 和 layout/fragment music 


_list.xml 。 下 面 修改 layout 资源 文件 ， 添 加 RecyclerView 控件 ( 见 图 14-3). 。 


Common 


blank fragment that is compatible CE 


back to API level 4. 
Buttons. 
lorizontalScrollView 
Widgets —— my NectedscrollView 


Fragment Name: MusicListFragment 
[^ 

Create layout XML? Nou DI ViewPager 

[SE = Cardview 
四 AppBarlayout 


图 14-2 图 14-3 
注意 ， 有 的 控件 右边 有 个 下 载 图 标 ， 表 示 这 个 控件 的 Jar 包 还 没有 被 下 载 到 本 地 ， 把 它 拖 


到 预览 图 的 内 容 区 时 会 出 现 图 14-4 所 示 的 对 话 框 。 


(x) This operation requires the library com.android.supportrecyclerview-v7:+. 


Would you like to add this now? 


144 
提示 是 否 要 添加 “recyclerview-v7:+” 库 ， 单 击 OK 按钮 ， 之 后 app/build.gradle 文件 中 会 
自动 增加 这 个 库 的 依赖 项 〈 版 本 号 可 能 不 同 ) : 


implementation 'com.android.support:recyclerview-v7:28.0.0" 
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Attributes 


之 后 Gradle 会 下 载 这 个 库 到 本 地 , 然后 就 可 以 用 了 。 


下 面 我 们 设置 这 个 控件 的 id 和 宽 高 属性 ， 让 它 充满 整个 | RR 
空间 〈 见 图 14-55 。 layout width match parent 


在 属性 编辑 器 中 可 以 看 到 , 默认 这 个 控件 就 是 充满 整 | yos height match parent 
个 空间 的 (match parent). JE ID i LX, "musicListView " 
〈 因 为 我 们 要 在 代码 中 操作 它 ) 。 图 14-5 
如 果 想 在 登录 成 功 之 后 就 显示 ， 就 要 修改 登录 按钮 响应 方法 ,显示 音乐 列表 页 面 〈 在 
LoginFragmentkt 中 ) 。 
运行 时 会 出 现 类 似 下 面 的 错误 提示 : 
Process: com.example.niu.firstcotlinapp, PID: 25446 


java.lang.RuntimeException: com.example.niu.firstcotlinapp. 
MainActivity8e794e14 must implement OnFragmentInteractionListener 


这 是 在 Fragment 附加 到 Activity 时 出 现 的 错误 ， 意 思 是 
MainActivity 必须 实现 接口 OnFragmentInteractionListener。 为 
什么 有 这 种 要 求 呢 ? 因为 在 使 用 向 导 创建 Fragment 时 选中 了 Include interface callbacks? A 
“包含 回调 接口 ”这 项 ( 见 图 14-6) 。 所 以 在 Fragment 的 类 图 14.6 
中 就 定义 了 接口 : 


private var listener: OnFragmentInteractionListener? = null 


interface OnFragmentInteractionListener ( 
// TODO: Update argument type and name 
fun onFragmentInteraction(uri: Uri) 


} 
JF H.TE onAttachQ fil onDetach0 中 加 入 了 以 下 代码 : 


override fun onAttach(context: Context) { 


super.onAttach (context) 
if (context is OnFragmentInteractionListener) ( 
listener - context 
) else { 
throw RuntimeException(context.toString() + " must implement 
OnFragmentInteractionListener") 
) 
} 


override fun onDetach() { 
super.onDetach() 
listener - null 

} 


onAttach() 在 Fragment 加 入 Activity 中 时 调用 ， 在 其 中 检查 context z Activity) 是 否 
实现 了 接口 OnFragmentInteractionListener， 如 果实 现 了 ， 就 把 context 保存 下 来 ， 如 果 没 有 实 
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现 ， 就 抛 出 异常 ， 这 正 是 我 们 在 日 志 中 看 到 的 异常 。 在 onDetachO 中 不 再 引用 context。 使 用 接 
口 是 为 了 降低 Activity 与 Fragment 的 耦合 性 ， 其 实 我 们 自己 用 的 代码 没 必要 做 到 这 人 么 完美 ， 
所 以 对 这 个 问题 的 解决 方案 就 把 验证 是 否 实现 接口 的 代码 去 掉 ， 于 是 变 成 了 这 样 : 
override fun onAttach(context: Context) ( 
super.onAttach (context) 
//if (context is OnFragmentInteractionListener) ( 
// listener = context 
//} else ( 
A throw RuntimeException(context.toString() + " must implement 
OnFragmentInteractionListener") 
//) 
) 


override fun onDetach() ( 
super.onDetach() 
//listener - null 


) 
14.2.2. ”创建 Adapter 子 类 


在 类 MusicListFragment 中 ， 创 建 一 个 private 内 部 类 ， 叫 作 MyAdapter 。 它 从 
RecyclerView.Adapter 派 生 , 可 以 看 到 使 用 的 是 RecyclerView 类 内 部 的 Adapter 类。 注意 , Adapter 
的 派生 类 存在 多 个 ， 因 为 能 容纳 子 控件 的 那些 控件 (不 包含 Layout 控件 ) 显示 和 管理 数据 的 
方式 不 同 ， 所 以 都 需要 有 自己 的 Adapter 类 。 

注意 ，RecyclerView.Adapter 是 一 个 范 型 类 : 


public abstract static class Adapter<VH extends RecyclerView.ViewHolder»( 


在 使 用 它 的 时 候 ， 需 要 传 入 一 个 类 型 作为 范 型 参数 〈 尖 括号 里 规定 的 类 型 ) 。VH extends 
ViewHolder 表示 这 个 作为 参数 的 类 型 必须 是 一 个 从 ViewHolder 派生 出 来 的 类 ， 所 以 我 们 实际 
上 在 创建 Adapter 的 子 类 之 前 需要 先 定义 一 个 ViewHolder 的 子 类 。 

我 们 创建 一 个 叫 作 MyViewHolder 的 子 类 ， 作 为 MusicListFragment 的 内 部 类 : 

//f MyAdapter A 

inner class MyViewHolder(itemView: View) : 


RecyclerView.ViewHolder(itemView) { 
} 


派生 类 很 简单 ,只 需要 实现 一 个 构造 方法 即 可 , 而 且 构造 方法 内 其 实 也 没 做 什么 特殊 处 理 。 
它 的 名 字 叫 ViewHolder， 是 用 来 约束 View 的 ， 这 里 的 View 指 的 是 每 行 的 控件 。 创建 Adapter 
类 ， 并 把 MyViewHolder 类 传 给 范 型 参数 ， 其 定义 如 下 : 


class MyAdapter : RecyclerView.Adapter«MyViewHolder»() { 
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override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): 
MyViewHolder ( 
TODO("not implemented") 
} 


override fun getItemCount (): Int { 
TODO("not implemented") 
} 


override fun onBindViewHolder(viewHoler: MyViewHolder, position: Int) { 
TODO("not implemented") 
) 
} 


从 这 个 类 派生 ， 至 少 要 实现 三 个 方法 。 这 三 个 方法 叫 回调 方法 ， 因 为 是 由 我 们 实现 而 由 别 
人 调用 ， 所 以 叫 回调 方法 。 是 被 谁 调 用 呢 ? RecyclerView! 前 面 讲 过 了 。 它 们 的 作用 分 别 是 : 


* onCTreateViewHolderO 是 当 RecyclerView 需要 创建 某 一 行 的 控件 时 调用 ,在 方法 内 我 们 要 创 


建行 控件 并 返回 这 个 控件 。 

* onBindViewHolder()& 3 RecyclerView 需要 将 一 条 数据 绑 定 到 对 应 的 控件 时 调用 ， 在 方法 
内 我 们 要 为 这 行 控件 设置 内 容 。 

egetItemCountO 是 当 RecyclerView 需要 知道 一 共 要 显示 多 少 行 时 调用 , 在 方法 内 我 们 需要 返 
回 行 数 。 


下 面 分 别 实现 这 三 个 方法 : 
(1) 实现 onCreateViewHolder() 


override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): 
MyViewHolder ( 


val textView = TextView(context) 
return MyViewHolder (textView) 


) 


这 个 方法 返回 对 应 行 的 控件 。 现 在 一 行 很 简单 ， 就 是 显示 一 串 文本 ， 那 么 一 个 文本 控件 就 
够 了 ， 所 以 在 代码 中 我 们 首先 创建 了 一 个 文本 控件 ， 然 后 又 创建 了 ViewHolder 对 象 ， 把 文本 
控件 放 到 了 ViewHolder 中 并 返回 。RecyclerView 实际 上 感 兴趣 的 是 控件 ， 但 是 必须 用 一 个 
ViewHolder 来 约束 它 。 


(2) 实现 onBindViewHolder() 


override fun onBindViewHolder (holder: MyViewHolder, position: Int) { 
val textView = holder.itemView as TextView 
if (position === 0) { 
textView.text = "我 是 第 1 行 " 
} else if (position === 1) { 
textView.text = "我 是 第 2 行 " 
} else if (position === 2) { 
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textView.text = "我 是 第 3 行 " 


这 个 方法 用 于 为 每 行 设置 不 同 的 数据 , 所 以 我 们 先 从 传 入 的 holder 中 取出 View, itemView 
就 是 在 onCreateViewHolder0 中 创建 的 那个 View， 然 后 根据 参数 position 来 确定 要 设置 的 是 第 
几 行 ， 不 同 的 行 设 置 不 同 的 文本 。 

为 什么 不 在 创建 某 一 行 的 控件 时 就 设置 不 同 的 值 呢 ? 这 是 为 了 复 用 控件 ， 从 而 节省 内 存 。 
行 控件 复 用 是 这 样 进 行 的 : 如 果 一 页 能 显示 10 fT. (取决 于 每 一 行 的 高 度 ) ， 那 么 这 10 行 中 每 
一 行 都 是 不 同 的 View 实例 ， 但 是 列表 控件 的 内 容 都 是 可 以 滚动 的 ， 如 果 列 表 共有 30 行 ， 就 
有 20 行 是 看 不 到 的 ,只 需要 有 10 个 行 控件 就 够 用 了 , 当 滚 动 时 , 移出 显示 区 的 行 控件 被 回收 ， 
移入 显示 区 的 行 不 会 再 创建 新 控件 ， 而 是 利用 已 回收 的 控件 ， 重 新 设置 其 内 容 ， 这 就 是 绑 定 。 


(3) 实现 getItemCount() 


override fun getItemCount(): Int ( 
return 3 


) 


很 简单 ,就 返回 3, 表示 共有 3 fT. 注意， 这 个 数 不 能 随意 写 ， 必 须 与 onBindViewHolder 
配合 ， 那 里 面 处 理 了 0、1、2 三 个 position， 此 处 必须 对 应 起 来 。 
Adapter 准备 好 了 ， 还 需要 将 Adapter 的 实例 设置 给 RecyclerView 才 行 。 


14.2.3 i& & RecyclerView 


在 MusicListFragment::onViewCreated0 中 设置 它 ， 代 码 如 下 : 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) ( 
super.onViewCreated(view, savedInstanceState) 
// DWE RecyclerView 
musicListView.layoutManager = LinearLayoutManager (context) 
musicListView.setAdapter (MyAdapter()) 

} 


可 以 看 到 为 列表 控件 设置 了 LayoutManager 和 适配器 。 此 处 出 现 了 一 个 LayoutManager, 
它 是 layout 管理 器 ， 决 定子 控件 的 排列 方式 。 实 际 上 把 RecyclerView 仅仅 看 作 列 表 控 件 太 肤 
浅 ， 因 为 它 不 仅 能 按 行 来 排列 子 控件 ， 还 可 以 按 栅 格 的 方式 排列 子 控件 ， 而 这 仅 需 设置 不 同 的 
LayoutManager 即 可 实现 。 我 们 现在 设置 的 是 LinearLayoutManager (线性 管理 器 ) ， 使 得 子 控 
件 按 行 排列 ， 当 改 为 GridLayoutManager 时 ， 就 以 栅 格 形式 显示 。 先 运行 一 下 App， 看 一 下 线 
性 管理 器 的 效果 ( 见 图 14-7) o FHE LayoutManager 改 成 栅 格 管理 器 ， 代 码 如 下 : 


musicListView.layoutManager = GridLayoutManager(context, 2) 


这 次 创建 栅 格 管理 器 时 参数 增多 了 ， 增 加 的 这 个 参数 表示 列 数 (设置 为 2 列 ) ,效果 如 图 
14-8 所 示 。 
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我 是 第 1 行 


我 是 第 2 行 我 是 第 1 行 我 是 第 2 行 
我 是 第 3 行 我 是 第 3 行 


图 14-7 图 14-8 
因为 后 面 我 们 主要 演示 列表 的 形式 ,所 以 把 LayoutManager 恢复 成 LinearLayoutManager。 
14.24 用 集合 保存 数据 


在 实际 的 项 目 中 , 我 们 不 可 能 像 onBindViewHolder0) 中 那样 用 寺 去 判断 当前 的 位 置 , 应 该 
用 集合 来 保存 数据 。 因 为 有 顺序 需求 ， 所 以 最 好 用 Array (数组 ) 或 List (列表 ) 来 保存 数据 。 
而 大 多 数 情况 下 数据 数量 是 可 变 的 ， 所 以 List 用 得 最 多 。 

下 面 我 们 就 改 为 用 List 来 保存 各 行 的 数据 ， 创 建 一 个 List 型 的 属性 : 


private val data = ArrayList«String»() 


这 个 集合 变量 应 放 在 哪里 呢 ? 根据 经 验 ， 放 在 RecyclerView 所 在 的 类 最 合适 ， 就 是 
MusicListFragment 类 中 。 
我 们 向 它 添 加 一 些 字符 串 作 为 每 行 的 内 容 〈 粗 体 代 码 ) : 


override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 
arguments?.let ( 

parami = it.getString(ARG PARAMI) 

param2 - it.getString(ARG PARAM2) 


data.add ("我 是 第 0 行 "); 

data.add ("我 是 第 1 行 "); 

data.add (" 我 是 第 2 行 ") ; 

data.add (" 我 是 第 3 行 ") ; 

data.add(" 我 是 第 4 行 ") ; 

data.add ("我 是 第 5 行 "); 
} 


应 该 在 为 RecyclerView 设置 Adapter 之 前 就 准备 好 数据 , 所 以 把 这 段 代码 放 到 列表 控件 初 
始 化 之 前 。 下 一 步 ， 改 造 Adapter 的 回调 方法 ， 把 List 与 RecyclerView 关联 起 来 。 改 造 完了 ， 
代码 如 下 : 


inner class MyAdapter : RecyclerView.Adapter<MyViewHolder>() { 
override fun onCreateViewHolder (parent: ViewGroup, viewType: Int): 
MyViewHolder { 
val textView = TextView(context) 


return MyViewHolder(textView) 
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l 


override fun getlItemCount(): Int ( 
return data.size 


$ 


override fun onBindViewHolder (holder: MyViewHolder, position: Int) { 
val textView = holder.itemView as TextView 
val text = data[position] 
textView. text = text 
} 
} 


onBindViewHolder0 方 法 发 生 了 改变 ， 在 设置 某 行 的 数据 时 ， 不 再 需要 用 f 去 比较 行 号 ， 
而 是 直接 根据 行 号 从 数组 data 中 取出 对 应 的 字符 串 。getItemCount0 方 法 也 发 生 了 改变 ， 返 回 
的 数量 不 再 是 一 个 常量 , 而 是 由 数组 data 决定 ,注意 , 此 处 data 这 个 变量 是 MusicListFragment 
的 属性 ， 但 是 由 于 MyAdapter 是 MusicListFragment 的 内 部 类 ， 因 此 可 以 直接 使 用 它 所 在 类 的 
实例 属性 。 


14,3. 让 子 控件 复杂 起 来 


前 面 演 示 RecyclerView 中 每 一 条 的 内 容 太 简 单 , 而 我 们 一 
般 见 到 的 App 中 每 一 条 都 很 复杂 ， 如 图 14-9 所 示 。 
下 面 我 们 就 让 列表 中 的 每 一 条 也 复杂 起 来 。 要 显示 复杂 的 es 
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内 容 ， 数 组 中 的 数据 必须 也 足够 复杂 。 我 们 想 在 每 行 中 显示 音 
乐 信息 ， 每 条 音乐 信息 包括 歌手 图 片 、 歌 手 名 、 歌 曲名 、 播 放 
次 数 。 而 且 我 们 希望 用 户 在 一 行 上 单 击 歌手 图 标 时 ， 显 示 此 歌 
手 的 信息 以 及 它 的 歌曲 ， 而 在 歌手 图 标 之 外 单 击 时 ， 进 入 歌曲 一 
播放 页 面 ， 开 始 播放 歌曲 。 下 面 我们 就 编写 一 下 ， 完 成 这 个 需 RBREER BARNE 


14.3.1. 创建 行 Layout 资源 


每 一 行 都 这 么 复杂 ， 如 果 用 代码 创建 行 控件 中 的 各 子 控件 ， 图 14-9 
再 摆 放 好 控件 的 位 置 是 相当 麻烦 的 , 那么 能 不 能 在 Layout 资源 中 设计 行 的 布局 呢 ? 当然 可 以 ! 
马上 创建 一 个 Layout 资源 ， 命 名 为 “music list item.xml”， 设 计 界 面 如 图 14-10 所 示 。 
注意 , 这 个 预览 图 虽然 看 起 来 是 一 个 手机 页 面 , 但 是 里 面 的 资源 仅仅 是 用 于 显示 一 行 的 内 
容 ， 界 面 编辑 器 并 不 知道 我 们 要 用 到 什么 地 方 ， 所 以 就 按 整 个 手机 屏幕 的 样式 显示 预览 。 
在 行 Layout 中 ， 左 边 是 一 个 图 片 控件 ， 右 边 由 三 行 控件 组 成 : 上 面 是 TextView， 显 示 歌 
手 名 字 ; 中 间 是 TextView， 显 示 歌 曲名 ; 下 面 是 ratingBar， 显 示 受 追捧 程度 。 我 们 用 
ConstraintLayout 作为 根 View。 构 成 此 Layout 的 控件 树 如 图 14-11 所 示 。 
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Component Tree E 


E imageView 
Ab textView2 


Ab textView3- 一 个 委 上 浪 扰 & 
* ratingBar 


图 14-10 14-11 


layout 文件 的 源码 如 下 : 


«?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"wrap content"^ 


«ImageView 
android:id-"G(id/imageView" 
android:layout width: 00dp" 
android:layout height-"100dp" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:layout marginBottom-"8dp" 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toTopOf-"parent" 
app:srcCompat-" Gdrawable/music default" f> 


<TextView 
android:id="@+id/textViewSinger" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:layout marginEnd-"8dp" 
android: text=" fg" 
android:textSize-"24sp" 
android:textColor-"Gandroid:color/ holo purple" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toEndOf-"& *id/imageView" 


app:layout constraintTop toTopOf-"parent" /> 


<TextView 
android:id="@+id/textViewTitle" 
android:layout_width="0dp" 
android:layout_height="0dp" 
android:layout_marginStart="8dp" 
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android:layout marginTop-"8dp" 

android:layout marginEnd-"8dp" 

android:layout marginBottom-"8dp" 

android:gravity-"center vertical" 

android: text="— AFERRA" 
android:textColor="eandroid:color/ holo blue dark" 

app:layout constraintBottom toTopOf-"68-id/ratingBar" 
app:layout constraintEnd toEndOf-"parent" 

app:layout constraintStart toEndOf-" @+id/imageView" 
app:layout_constraintTop_toBottomOf="@+id/textViewSinger" /> 


<RatingBar 

android:id="@+id/ratingBar" 
style="@style/Widget.AppCompat.RatingBar.Small" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_marginStart="8dp" 
android:layout_marginBottom="8dp" 
android:rating="2" 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintStart toEndOf-"(rid/imageView" /> 

«/android.support.constraint.ConstraintLayout^ 


我 们 做 了 以 下 工作 : 


(1) 图 像 控 件 的 宽 和 高 都 固定 成 了 100dp， 这 样 不 论 实际 图 像 的 大 小 和 宽 高 比 ， 都 以 按 
比例 拉 伸 的 方式 显示 ， 使 各 行 的 图 像 大 小 看 起 来 比较 一 致 。 

(2) 最 外 层 Layout 的 宽 充 满 整 个 父 控件 , 但 是 高 由 子 控件 的 高 度 之 和 决定 ， 其 实 是 由 图 
像 控 件 决定 的 ， 因 为 它 最 高 。 

(3) textViewSinger 位 于 图 像 控件 的 右边 ， 在 纵向 上 我 们 希望 它 靠 项 部 ， 横 向 上 我 们 希 
望 它 充满 图 像 控 件 之 外 的 所 有 空间 ， 而 高 由 内 容 决 定 。 

(4) ratingBar 位 于 图 像 控 件 的 右边 ， 在 纵向 上 我 们 希望 它 靠 底部 ， 让 它 的 宽 由 内 容 决 定 
(注意 ， 它 的 宽度 其 实 是 由 一 个 默认 宽度 决定 的 ) 。 有 一 点 要 注意 ，ratingBar 中 的 星星 大 小 
需要 通过 Style 来 设置 。 

(5) textViewTitle 位 于 图 像 控 件 的 右边 ， 在 纵向 上 位 于 中 间 ， 并 且 我 们 希望 它 占据 上 下 
TextView 之 外 的 所 有 空间 ; 横向 上 也 是 占据 图 像 控件 之 外 的 所 有 空间 。 


14.3.2 ”应 用 条 目 Layout 资源 


定义 好 了 每 一 行 的 Layout 资源 ， 如 何 把 这 个 资源 利用 起 来 呢 ? Adapter 类 的 回调 方法 
onCreateViewHolder0 是 用 于 创建 并 返回 行 控件 的 ， 我 们 只 要 在 其 中 利用 Layout 资源 创建 出 行 
控件 并 返回 即 可 。 代 码 如 下 : 

override fun onCreateViewHolder (parent: ViewGroup, viewType: Int): 


MyViewHolder { 
val inflater = this@MusicListFragment.1ayoutInflater 
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val view = inflater.inflate(R.layout.music list item, parent, false) 
return MyViewHolder (view) 


) 


这 个 方法 内 加 载 了 行 Layout 资源 ， 创 建 出 控件 ， 然 后 把 控件 包 在 ViewHolder 中 返回 。 创 
建 控 件 使 用 了 LayoutInflater 实例 ， 但 是 各 对 象 不 是 新 建 出 来 的 ， 而 是 使 用 Fragment 的 方法 
getLayoutImnflater0) 获 取 的 。LayoutImflater 的 方法 inflate0 根 据 Layout 资源 来 创建 控件 ， 它 的 第 
一 个 参数 是 Layout 资源 , 第 二 个 参数 是 所 创建 的 控件 的 父 控件 , 第 三 个 参数 是 Boolean 类 型 ， 
为 true 时 表示 创建 出 来 的 控件 会 放 到 父 控件 中 ， 如 果 为 fase 则 不 会 。 此 时 依然 要 传 第 入 第 二 
个 参数 ， 因 为 它 里 面包 含 了 控件 的 排版 参数 (LayoutParams) 。 必 须要 注意 的 是 ， 我 们 第 三 个 
参数 传 入 了 false， 如 果 传 入 tme， 那 是 不 可 以 的 ， 会 引起 问题 。 

inflate() 方 法 返回 的 View 是 行 控 件 树 中 最 外 面 的 那个 ， 也 就 是 ConstraintLayout。 

还 要 修改 一 个 方法 : onBindViewHolder0。 原 先 绑 定 TextView 的 做 法 已 不 适用 ， 清 除 它 
的 内 容 即 可 。 至 于 另 一 个 方法 getItemCountO, 只 是 决定 行 数 , 不 用 修改 。 整 个 类 的 代码 如 下 : 

inner class MyAdapter : RecyclerView.Adapter<MyViewHolder>() { 

override fun onCreateViewHolder (parent: ViewGroup, viewType: Int): 
MyViewHolder { 
val inflater = this@MusicListFragment.1ayoutInflater 
val view = inflater.inflate(R.layout.music list item, parent, false) 
return MyViewHolder (view) 


) 
override fun getItemCount(): Int ( 
return data.size 

) 

override fun onBindViewHolder(holder: MyViewHolder, position: Int) ( 

) 
) 
meye = : Q 牛 德 华 
运行 程序 ， 登 录 后 出 现 如 图 14-12 所 示 的 界面 。 看 起 来 还 不 Mt ENS 

错 ， 但 是 有 一 处 不 足 : 行 之 间 没 有 分 界 。 * 


O 牛 德 华 


14.3.3 明显 区 分 每 一 行 me AE EREMIA 
要 解决 上 一 节 的 问题 ， 在 每 行 之 间 显 示 一 条 线 ， 其 实 还 可 以 LIES S 

有 更 简单 的 办 法 ， 使 用 CardView CRI 14-13) 。 1 
把 CardView 拖 到 预览 图 中 ， 随 意 放 个 地 方 。Android Studio 


会 提示 添加 包含 CardView 的 库 依赖 。 14-12 

实际 上 我 们 不 能 在 预览 模式 下 随意 放置 Card View 的 位 置 ,应 把 它 作为 一 行 最 外 层 的 容器 。 
直接 修改 源码 ， 具 体 如 下 : 

«?xml version-"1.0" encoding="utf-8"?> 


«android.support.v7.widget.CardView 
xmlns:android-"http://schemas.android.com/apk/res/android" 
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xmlns:app-"http://schemas.android.com/apk/res-auto" 


android:layout width-"match parent" 
android:layout height-"wrap content"^ 


«android.support.constraint.ConstraintLayout 
android:layout width-"match parent" 
android:layout height-"wrap content"» 


«/android.support.constraint.ConstraintLayout^ 


X/android.support.v7.widget.CardView^ 


可 以 看 到 原来 最 外 层 的 元 素 成 了 Card View 的 子 元 素 ， 而 且 把 xmlns 属性 移 到 了 最 外 层 元 
素 上 。CardView 只 能 有 一 个 子 控件 ， 所 以 还 需要 原来 的 ConstraintLayout 包含 其 他 控件 。 需 要 
注意 的 是 ，CardView 的 高 度 也 应 该 由 内 容 决 定 。 还 没有 完成 ,还 要 给 CardView 设置 一 些 属性 


( 见 图 14-14) : 


* Layout Margin: 使 得 每 行 的 外 部 都 有 空白 (上 下 左右 都 有 ) ， 于 是 行 与 行 之 间 也 有 空白 。 


e cardBackgroundColor: 设置 CardView 的 背景 色 。 


* cardCornerRadius: 设置 CardView 的 四 角 为 贺 角 ， 指 定 圆 角 的 半径 为 10dp。 


id 
layout width 
layout height 

» Constraints 

* Layout Margin 

all 
bottom 
end 
left 
right 
start 
top 

» Padding 

» Theme 
elevation 


{= RecyclerView 
W ScrollView 

188 HorizontalScrollView 
ID NestedScrollView 


Text 
Button| 


Widge 


Layou| Al ViewPager 
Containers — Wl CardView 


Google AppBarLayout 
E] NavigationView 


Legacy EET 
E BottomNavigationView 


card&ackgroundColor 


Project cardCornerRadius 


图 14-13 


运行 看 看 效果 ( 见 图 14-15) 。 现 在 的 最 大 问题 是 每 行 的 内 
容 都 一 样 。 要 改变 这 个 问题 ， 需 要 实现 Adapter 的 
onBindViewHolder() 方 法 。 我 们 还 要 先 改 变 一 下 提供 数据 的 数组 ， 
让 它 的 每 一 项 都 复杂 起 来 ， 以 适应 行 控件 。 需 要 创建 一 个 类 ， 让 
数组 的 每 一 项 都 是 这 个 类 的 实例 才能 存储 复杂 数据 ， 并 命名 为 
MusicInfo， 放 在 当前 包 下 。 其 内 容 如 下 : 

class MusicInfo(var singer: String?- null,//Zt ££ 


var title: String? = null,// 恬 盛名 
var like: Int = 0) ///LAiFff 
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match parent 
wrap. content 


Rap. 2, 2,2,2] 
2dp 


[2222] 


Wl @android:color/holo green light 


10dp 


14-15 


第 14 章 RecyclerView 


注意 , 主 构造 方法 中 的 三 个 参数 实际 上 对 应 类 中 三 个 同名 属性 。 本 来 这 个 类 应 该 有 四 个 属 
性 ， 但 是 我 们 只 用 了 三 个 ， 因 为 暂时 不 想 让 每 行 图 像 不 一 样 ， 后 面 会 用 专门 的 库 操作 列表 行 控 
件 中 的 图 像 ， 现 在 就 是 做 个 样子 而 已 。 


14.8.4 使 用 音乐 信息 类 
存放 列表 数据 的 List 中 每 一 项 都 要 变 成 MusicInfo 的 实例 ， 所 以 List 变量 的 定义 改 为 : 


private val data = ArrayList<MusicInfo>() 


为 这 个 数组 填充 数据 的 代码 也 要 改 一 下 : 


override fun onCreate(savedInstanceState: Bundle?) { 


super.onCreate (savedInstanceState) 
arguments?.let ( 
parami = it.getString(ARG PARAMI) 
param2 - it.getString(ARG PARAM2) 


data.add (MusicInfo (" 马 云云 "," 路 蘑菇 的 小 关 娘 " ,4) ) 
data.add (MusicInfo ("贝克 汗 脚 ", "我 是 真 的 还 想 再 借 五 百 元 " ,2) ) 
data.add (MusicInfo ("杰克 孙 ", "一 行 白 获 上 西天 " ,2)) 
data.add (MusicInfo ("/Fffifév , " —4 3€ ERBA" ,2)) 
data.add (MusicInfo (" 王 钢 烈 "," 菊 花 残 ",5)) 
data.add (MusicInfo (" 罗 金 凤 " ," 一 天 到 晚 游泳 的 驴 " ,4) ) 

) 


Adapter 类 绑 定 数据 的 方法 也 要 改 一 下 : 


override fun onBindViewHolder(holder: MyViewHolder, position: Int) ( 

/ LG fr RID List 项 

val musicInfo - data[position] 

LIBE IEBEBISE EIE ER 

holder.itemView.textViewSinger.text = 
musicInfo.singer 

holder.itemView.textViewTitle.text = 
musicInfo.title 

holder.itemView.ratingBar.rating = 
musicInfo.like.toFloat() 


} 

holderitemView 就 是 在 onCreateViewHolder0 中 创建 的 
View， 是 行 的 根 View。 注 意 ratingBar， 在 资源 文件 中 ， 并 没 
有 设置 星星 的 数量 (starNum) ， 其 默认 显示 5 个 ， 而 我 们 创 
建 的 歌曲 信息 对 象 时 ， 其 like 属性 的 值 〈 构 造 方法 的 第 3 个 
参数 ) 也 没有 超过 5， 所 以 能 正确 地 显示 出 星 级 。 运 行 之 ， 效 
果 如 图 14-16 所 示 。 14-16 
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14,47. 增删 改 


只 显示 没意思 ， 我 们 还 要 对 列表 进行 增删 改 。 
14.4.1 增加 一 条 数据 


首先 回忆 一 下 ， 列 表 控 件 的 内 容 是 谁 提供 的 ?是 Fragment 类 中 的 List 变量 data。 实 际 上 
要 增加 一 条 , 必须 先 在 data 中 增加 一 条 , 然后 通知 RecyclerView 刷新 内 容 , 于 是 RecyclerView 
就 重新 调用 Adapter 的 方法 ， 重 新 创建 子 控件 并 显示 。 

首先 我 们 得 有 触发 这 个 功能 的 机 制 ， 那 就 增加 一 个 菜单 项 吧 ! 当 用 户 选择 此 菜单 项 时 , 在 
最 后 增加 一 条 音乐 信息 。 一 说 到 增加 菜单 项 , 可 能 首先 想到 的 是 找到 Activity 的 菜单 资源 文件 ， 
在 其 中 增加 新 的 菜单 项 。 这 当然 没有 问题 ， 其 实 Fragment 也 可 以 有 自己 的 菜单 资源 ， 创 建 自 
己 的 菜单 。 但 是 , Fragment 的 菜单 却 不 会 替换 Activity 的 菜单 ,而 是 当 显示 这 个 Fragment Hf, 
Fragment 的 菜单 被 追加 到 Activity 的 菜单 中 。 

Fragment 类 中 也 有 onCreateOptionsMenu() 和 onOptionsItemSelected0 方 法 ， 其 代码 的 作用 
与 Activity 中 相同 。 

我 们 先 添加 一 个 菜单 资源 〈 见 图 14-17) ， 再 向 菜单 中 添加 一 个 Iem， 并 设置 其 id 和 标题 

CORE 14-18) 。 


Eile name: music list menu 


Source set: main 
Directory name: menu 


Ayailable qualifiers: Chosen qualifiers: 


title 

actionLayout 
actionProviderClass. 
actionViewClass. 
alphabeticShortcut. 
checkable 


14-18 
实现 MusicListFragment::onCreateOptionsMenu()， 加 载 此 菜单 : 


override fun onCreateOptionsMenu (menu: Menu?, inflater: MenuInflater?) { 


super.onCreateOptionsMenu (menu, inflater) 
V/A RRRA 


inflater?.inflate(R.menu.music list menu, menu); 
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实现 onOptionsItemSelected0， 响 应 此 菜单 : 


override fun onOptionsItemSelected(item: MenuItem?): Boolean ( 


// IK Fragment PRŽI 


item?.let ( 
if (item.itemId == R.id.add one music info) ( 


/ / IRAE T Hn 

val musicInfo = MusicInfo ("新 歌手 "，" 一 首 新 歌 "，1) 
data.add (musicInfo) 

//HFl/fl Adapter JA] RecyclerView, MRH 
musicListView.adapter?.notifyDataSetChanged() 


return true// ŻA] true PHRA HRI T 


} 
return super.onOptionsItemSelected(item) 

) 

还 有 一 个 地 方 要 特别 注意 ， 因 为 我 们 很 容易 把 它 忘掉 调用 this.setHasOptionsMenu(true); 
显示 菜单 。 这 一 句 代 码 必 须 放 在 onCreateOptionsMenu0 之 前 ， 所 以 放 在 Fragment 的 onCreate() 
方法 中 : 

override fun onCreate(savedInstanceState: Bundle?) { 

super.onCreate (savedInstanceState) 


arguments?.let ( 
parami = it.getString(ARG PARAMI) 
param2 = it.getString(ARG PARAM2) 


) 
/ IH —6], Fragnent FI I GEIHUDK 


setHasOptionsMenu (true) 


运行 App， 单 击 “ 登 录 ” 进 入 音乐 列表 页 面 ， 单 击 “ 菜 单 ”， 效 果 如 图 14-19 所 示 。 选 中 
“Add One”， 在 最 后 多 了 一 项 ， 如 图 14-20 所 示 。 


图 14-19 图 14-20 
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14.4.2 ”其 他 操作 


e 增加 多 条 : 与 增加 一 条 一 样 ， 先 在 List 中 增加 多 条 数据 ， 然 后 通知 RecyclerView 刷新 。 
e 插入 : 与 增加 一 条 一 样 ， 先 在 List 中 插入 数据 ， 然 后 通知 RecyclerView 刷新 。 
e 删除 : 与 增加 一 条 一 样 ， 先 在 List 中 删除 数据 ， 然 后 通知 RecyclerView 刷新 。 


14.5 局 部 刷新 


前 面 对 列 表 的 改变 看 起 来 非常 容易 , 但 是 这 样 做 效率 不 高 。 因 为 我 们 不 论 改变 的 是 一 条 还 
是 多 条 ， 都 让 RecyclerView 刷新 了 全 部 数据 。 注 意 下 面 这 一 句 代码 : 


musicListView.getAdapter().notifyDataSetChanged(); 


目的 就 是 通知 数据 集 改变 了 。 数 据 集 指 的 是 所 有 的 数据 。Adapter 还 提供 了 更 多 的 通知 方 
法 ， 能 适应 各 种 情况 ， 如 图 14-21 所 示 。 


" * notifyItemchanged (position: Int) 

t + notifyItemChanged (position: Int, payload: Any?) 
* notifyItemInserted(position: Int) 
notifyItemMoved(f£romPosition: Int, toPosition: In.. 
notifyItemRangeChanged(positionStart: Tnt, itemco.. 
notifyItemRangeChanged(positionStart: Int, itemCo.. 


notifyItemRangeInserted(positionstart: Int, itemc.. 
notifyItemRangeRemoved(positionStart: Int, itemCo.. 
notifyItemRemoved (position: Int) 


图 14-21 


这 么 多 通知 方式 ! 通过 名 字 基 本 能 猜 出 其 作用 ， 如 通知 条 目 改变 (Changed) 、 条 目 插入 
(JInserted)、 条目 移 动 位 置 (Moved) ,方法 名 中 包含 “Item” 的 只 影响 一 条 , 包含 “ItemRanged” 
的 影响 多 条 ， 但 这 些 条 目 必须 是 相 邻 的 。 
我 们 把 前 面 增加 一 个 条 目的 代码 做 一 下 修改 ， 改 为 在 data 第 1 条 的 后 面 插 入 新 的 音乐 信 
息 。 首 先 还 是 操作 data， 然 后 通知 RecyclerView。 代 码 如 下 : 
if (item.itemId == R.id.add one music info) { 
// AAR TI A 
val musicInfo = MusicInfo(" 新 歌手 "，" 一 首 新 歌 "，1) 
data.add (musicInfo) 
//F//fl Adapter iA] RecyclerView, BIRIA I —d 38 
musicListView.adapter?.notifyItemInserted(1); 
return true//JE/[E true Zl X B ABE T 
f 


注意 ， 上 面 代码 中 向 data 中 添加 数据 的 语句 和 通知 RecyclerView 的 语句 ， 向 其 传 入 的 参 
数 中 表示 条 目 序号 的 值 都 是 1， 这 里 必须 一 致 。 
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其 余 操作 的 通知 请 自行 实验 。 


14.6 MARBH 


我 们 在 使 用 各 种 App 时 经 常会 有 这 种 操作 : 单 击 选择 一 条 ， 进 入 新 的 页 面 ， 显 示 这 条 的 
详细 信息 。 要 实现 这 样 的 功能 ， 必 须 响 应 一 条 的 单 击 事件 。 一 说 到 响应 事件 ， 首 先 应 该 想到 侦 
听 器 。RecyclerView 中 有 没有 类 似 “setOnItemClickListener0 ”的 方法 呢 ? 很 不 幸 ， 没 有 ， 不 
过 我 们 可 以 为 一 条 条 目的 根 控件 设置 事件 侦 听 。 但 是 , 在 哪里 写 设置 代码 呢 ? 必须 在 能 取得 条 
目 控件 的 地 方 , 而 且 最 好 是 在 它 刚 被 创建 出 来 时 ， 这样 在 单 击 它 时 才能 随时 响应 。 最 合适 的 位 
置 就 是 Adapter 的 回调 方法 onCreateViewHolder0。 以 下 是 代码 实现 : 


override fun onCreateViewHolder (parent: ViewGroup, viewType: Int): 
MyViewHolder { 
val inflater = this@MusicListFragment.layoutInflater 
val view = inflater.inflate(R.layout.music list item, parent, false) 
// AE HIBTR View BIB EAE U EAEE — ITAR 
view.setOnClickListener ( 
v -> Snackbar.make (v," 你 选择 了 一 行 ",Snackbar . LENGTH_LONG) . show () 
return MyViewHolder (view) 


) 


现在 运行 的 话 , 单 击 一 条 , 出 现 提 示 , 如 图 14-22 所 示 。 我 们 还 应 该 取出 所 选 条 目的 信息 。 
取得 所 选 条 目的 信息 就 是 根据 RecyclerView 中 的 条 目 找到 对 应 data 中 的 条 目 。 我 们 需要 先 取 
得 RecyclerView 中 条 目的 序号 。 要 取得 序号 ， 就 必须 借助 ViewHolder。 我 们 应 该 把 设置 侦 听 
器 的 代码 移 到 ViewHolder 类 中 , 这 样 就 容易 使 用 ViewHolder 的 实例 方法 了 。 将 这 段 代码 放 到 
ViewHolder 的 初始 化 代码 块 中 即 可 ， 代 码 如 下 : 


inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { 
init( 
//AESRCHIURR view IRE ds ELE AZE EIT RR 
itemView.setOnClickListener ( 
/ HL SSBITIBIEL MESH 
val musicInfo = data[adapterPosition] 
Snackbar.make( 
it, 
"你 选 了 第 " + adapterPositiont " 行 , 歌 名 是 : " + musicInfo.title, 
Snackbar.LENGTH LONG 
).show() 
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在 这 段 代 码 中 ， 我 们 通过 ViewHolder 的 属性 adapterPosition 获取 到 当前 条 目 对 应 的 适 配 
器 中 数据 的 位 置 ， 也 就 是 data 中 条 目的 位 置 ， 这 里 是 关键 。 运 行 效果 如 图 14-23 所 示 。 


图 14-22 


14.7 显示 不 同类 型 的 行 


我 们 经 常会 在 一 些 App 中 看 到 列表 形式 显示 的 内 容 , 但 是 一 一 一 一 

各 行 之 间 的 Layout 并 不 相同 ， 比 如 图 14-24。 Por d Fm 
要 实现 这 样 的 效果 ， 肯 定 需要 准备 多 个 条 目 Layout 资源 ， ete 

而 且 后 台 存储 数据 的 List 的 各 条 目 也 不 是 同一 个 类 的 实例 ， 因 

为 不 同行 显示 的 可 能 不 是 同一 种 类 型 的 数据 。 我 们 需要 根据 FADEN 

List 的 条 目 类 型 显示 不 同 的 Layout， 同 时 绑 定 不 同 的 控件 。 下 "a a 


面 让 我 们 一 步 步 实现 这 个 效果 。 iia 


IURUESUBJGE208 E, KRIRA, 
joi] 


14.7.1 添加 新 条 目 数 据 类 机 组 ， 远 程 飞行 需要 两 班 倒 ? 


首先 我 们 添加 一 个 类 , 保存 条 目的 数据 .区别 于 MusicInfo, 
这 个 类 叫 Advertising (广告 ) 。 它 是 我 们 在 音乐 列表 中 插入 的 
广告 , 只 有 两 个 字段 : 一 是 广告 商 , 二 是 广告 内 容 。 源 码 如 下 : 图 14.24 


11 EWR PER E 

class Advertising (var advertiser:String /*/ /$£*/, var content:String /*/ f$ 
IATER) 

我 们 创建 一 个 广告 类 实例 ， 插 入 到 后 台数 据 “data” 中 ,但 在 此 之 前 ， 需 要 把 data 的 类 型 
改 一 下 ， 因 为 它 里 面 存 的 数据 不 仅 是 MusicInfo 一 种 ， 还 要 有 Advertising， 需 要 将 其 范 型 参数 
改 为 两 个 类 共同 的 父 类 ， 只 能 是 Any (相当 于 Java 中 的 Object) : 


class MusicListFragment : Fragment() { 


下 面 再 添加 Advertising 对 象 就 没 问题 了 : 


data.add (MusicInfo ("马云 云 ", " 踩 蘑 菇 的 小 姑娘 ", 4) ) 
data.add (MusicInfo (" 贝 克 汗 脚 ", "我 是 真 的 还 想 再 借 五 百 元 ", 2) ) 
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data.add (MusicInfo ("ZRJEfA","—4T EIE EP" ,2)) 
/ILBA—ITR 

data.add (Rdvertising(" 蓝 翔 "，" 中 国航 天 人 才 的 摇篮 指定 生产 厂家 ") ) 
data.add (MusicInfo(" 牛 德 华 " ARERIA", 2) ) 

data.add (MusicInfo (" 王 钢 烈 ", "菊花 残 ", 5) ) 

data.add (MusicInfo(" 罗 金 凤 ", "一 天 到 晚 游泳 的 驴 ", 4) ) 


数据 准备 好 了 ， 下 一 步 添加 广告 条 目 对 应 的 Layout 资源 。 
14.7.2 MAH Layout 
添加 Layout HIRRET, WE 14-25 所 示 。 


File name: music list advertising item 
Root element: LinearLayout 
Source set: main. Y 


Directory name: layout 


14-25 


Layout 很 简单 ， 就 是 两 个 TextView， 预 览 如 图 14-26 
所 示 ， 其 源码 如 下 : 
«?xml version-"1.0" encoding="utf-8"?> 
*XLinearLayout xmlns:android-"http: 图 14-26 
//schemas . android.com/apk/res/android" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:gravity-"center vertical"^ 


*TextView 
android:id-"G(4id/textViewAdvertiser" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginRight-"10dp" 
android:text-"J]" dX" 
android:textSize-"24sp" /» 


«TextView 
android:id-"Grid/textViewContent" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:text=" 内 容 " 
android:textSize-"18sp" /> 

«/LinearLayout^ 


下 一 步 还 不 能 修改 Adapter 的 代码 ， 而 是 需要 创建 新 的 ViewHolder 25. 
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14.7.3 创建 新 的 ViewHolder 类 


不 同 的 条 目 Layout， 其 包含 的 子 控件 也 不 相同 ， 所 以 每 一 个 条 目 Layout 都 要 对 应 一 个 
ViewHolder 类 ， 而 且 为 了 容易 扩展 ， 一 般 会 创建 一 个 作为 基 类 的 抽象 ViewHolder 类 ， 其 余 
ViewHolder 类 都 从 它 派生 。 我 们 先 创 建 基 类 ， 依 然 作 为 MusicListFragment 的 内 部 类 : 


inner open class BaseViewHolder(itemView: View) : RecyclerView.ViewHolder 


(itemView) 


可 以 看 到 ， 现 在 没有 什么 实质 性 的 内 容 。 下 面 修改 原先 的 ViewHolder 类 MyViewHolder 
(注意 加 粗 的 地 方 》: 


inner class MyViewHolder (itemView: View) : BaseViewHolder (itemView) { 

再 创建 Advertising Item 对 应 的 ViewHolder 类 AdvertisingViewHolder: 

inner class AdvertisingViewHolder (itemView: View) : BaseViewHolder (itemView) 

最 后 ，MyAdapter 类 中 用 到 MyViewHolder 的 地 方 都 要 改 为 BaseViewHolder， 比 如 
MyAdapter 定义 时 所 传 入 的 范 型 参数 ， 改 为 这 样 : 

inner class MyAdapter : RecyclerView.Adapter<BaseViewHolder>() 

onCreateViewHolder0 的 定义 改 为 : 


override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): 
BaseViewHolder { ... ... 


onBindViewHolder()If] ;E X BOY: 


override fun onBindViewHolder(holder: BaseViewHolder, position: Int) 


下 一 步 改写 Adapter 的 代码 ， 根 据 data 中 条 目的 类 型 ， 显 示 不 同 的 Layout 以 及 绑 定 不 同 
的 控件 。 


14.7.4 区 分 不 同 的 View Type 


RecyclerView 中 使 用 View Type 区 分 不 同 的 条 目的 Layout， 前 面 的 例子 中 只 有 一 种 条 目 
Layout， 所 以 不 需要 区 分 。 
onCreateViewHolder() 的 第 二 个 参数 就 是 要 创建 的 条 目的 View Type， 我 们 需要 在 
onCreateViewHolder0 中 判断 它 的 值 ,根据 不 同 的 值 使 用 对 应 的 条 目 Layout 资源 创建 条 目 View. 
它 的 值 是 由 我 们 自己 决定 的 ， 我 们 需要 重 写 另 一 个 方法 ,在 其 中 决定 各 条 目 对 应 的 View Type 
的 值 。 这 个 方法 是 getItemViewType0， 它 的 实现 如 下 : 
override fun getItemViewType (position: Int): Int ( 
/HKIES3t position BEIF] viewrype PE, ITHE 
// RIIEE layout fff ID 作为 ViewType Mitä 


return if (data[position] is MusicInfo) { 


/ FAIRE MusicInfo 
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R.layout.music list item 


} else { 
LAKE TELE Advertising 


R.layout.music list advertising item 


f 
在 onCreateViewHolder0 中 根据 不 同 的 View Type 加 载 不 同 的 Layout: 


override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): 
BaseViewHolder ( 

val inflater = thisG8MusicListFragment.layoutInflater 

//viewType BL Layout fj id 

val view = inflater.inflate(viewType, parent, false) 

return if (viewType === R.layout.music list item) ( 
MyViewHolder (view) 

) eise ( 
AdvertisingViewHolder (view) 


) 


在 上 面 的 代码 中 ， 通 过 判断 viewType 的 值 创 建 不 同 的 viewHolder 类 。 下 一 步 修 改 
onBindViewHolder0， 判 断 每 条 数据 的 类 型 ， 进 行 不 同 的 绑 定 。 代 码 如 下 : 


override fun onBindViewHolder(holder: BaseViewHolder, position: Int) ( 

/ LR — fr AIMO List 项 

val item = data[position] 

if(item is MusicInfo)( 
//item ERA a ARHI A 
// RRE E PIRR EEP 
holder.itemView.textViewSinger?.text = item.singer 
holder.itemView.textViewTitle?.text = item.title 
holder.itemView.ratingBar?.rating = item.like.toFloat() 

Jelse if(item is Advertising)( 
//item ET EXMA 
holder.itemView.textViewAdvertiser.text = item.advertiser 
holder.itemView.textViewContent.text — item.content 


) 


运行 App， 进 入 主页 面 ， 效 果 如 图 14-27 所 示 。 
到 此 为 止 ，RecyclerView 的 主要 用 法 介绍 完了 。 后 面 会 大 量 使 
用 它 ， 也 会 解锁 更 多 的 “姿势 ”。 


14-27 
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< 模仿 QQ App 界 面 > 


我 们 的 App 最 终 要 实现 聊天 功能 。 现 在 我 们 已 掌握 构建 复杂 界面 的 技术 ， 先 把 QQ 界面 
模仿 出 来 ， 再 增加 实质 的 聊天 功能 。 

整体 来 说 ，QQ App 的 大 多 数 页 面 在 顶部 都 具有 ActionBar。 实 际 上 那 并 不 是 一 个 真 的 
ActionBar， 而 是 用 View 模拟 出 来 的 ， 所 以 我 们 需要 把 Activity 的 ActionBar 去 掉 。 


创建 新 的 Android 项 目 


新 建 一 个 Android 工程 “QQAppCotlin”， 在 选择 Activity 时 ， 选 择 “Empty Activity" , 
支持 的 最 低 版 本 随便 选 ， 这 里 选 的 是 6.0， 别 忘 了 选中 “Use AndroidX Artifacts” RE T 
来 的 “support 库 ”), 保留 Activity 的 名 字 为 MainActivity( 这 是 App 中 添加 的 第 一 个 Activity )。 

把 Activity 的 ActionBar 去 掉 〈 见 图 15-1) o 


i, styles.xml 


«resources» 


? «style name= “AppTheme” parent-"Thene. Appconpat. Light | oActiongar") 


«item name-"colorPrimary"»(jcolor/colorPrimary«/item» 
«item name-"colorPrimaryDark"»(color/colorPrimaryDark«/item» 
«item namez"colorAccent"»Qcolor/colorAccent«/item» 

«/style» 


«/resources» 


图 15-1 


设计 登录 页 面 


注意 ， 各 页 面 都 是 Fragment! 下 面 先 创建 登录 Fragment. 


Æ 模仿 QQ App 界面 


15.2.1 创建 登录 Fragment 


创建 一 个 空 的 Fragment， 取 名 LoginFragment, Creates a blank fragment that is compatible 
同时 要 创建 layout 文件 ， 如 图 15-2 所 示 。 GEX, back to API level 4. 
不 要 选中 红 框 中 的 项 。) em E 

下 面 把 LoginFragment 显示 在 MainActivity 中 。 Create lsyout XML? 
由 于 MainActivity 的 layout 文件 中 根 View 默认 是 iind. 
ConstraintLayout, 而 作为 Fragment 容器 的 Layout 用 


FragmentLayout 比较 好 ， 所 以 将 ConstraintLayout 改 | sowce tangvsoe: kotin 5 
为 FragmentLayout. activity main.xml 内容 如 下 : Target Source Ser Em 5 


<?xml version-"1.0" encoding="utf-8"?> 

<FrameLayout 图 152 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:tools-"http://schemas.android.com/tools" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context-".MainActivity" 
android:id="@+id/ fragment_container"> 


</FrameLayout> 
TE Activity 启动 时 就 将 Fragment 加 入 到 Activity 中 (MainActivity 类 中 ) : 


override fun onCreate(savedInstanceState: Bundle?) { 
super.onCreate (savedInstanceState) 
setContentView(R.layout.activity main) 


//X€ LoginFragment WA, fEXBU 

val fragmentTransaction = supportFragmentManager.beginTransaction() 
val fragment - LoginFragment() 
fragmentTransaction.add(R.id.fragment container, fragment) 
fragmentTransaction.commit() 


) 


还 要 将 Activity 的 ActionBar 去 掉 , 方法 是 修改 Activity 的 theme. 在 Manifest 中 文件 内 容 
anb: 


«manifest xmlns:android-"http://schemas.android.com/apk/res/android" 
package-"com.example.niu.qqapp"^ 


«application 
android:allowBackup-"true" 
android:icon-"8mipmap/. ic launcher" 


android:label-"8string/ app name" 
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android:roundIcon="@mipmap/ ic launcher round" 
android:supportsRtl="true" 
android:theme="@style/AppTheme"> 

<activity android:name=".MainActivity"> 
<intent-filter> 


«action android:name="android.intent.action.MAIN"/> 


<category android:name="android.intent.category .LAUNCHER"/> 
</intent-filter> 
</activity> 
</application> 


</manifest> 


可 以 看 到 Activity 并 没有 设置 theme 属性 ， 此 时 它 会 使 用 Application 的 theme: 
android:theme="@style/AppTheme"。 在 res/values/styles.xml 文件 中 定义 了 AppTheme 这 个 Style, 


内 容 是 这 样 的 : 
«!-- Base application theme. --> 
<style name-"AppTheme" parent-"Theme.AppCompat.Light.DarkActionBar"^ 
<!-- Customize your theme here. --> 


<item name-"colorPrimary"»(color/colorPrimary«c/item» 
<item name-"colorPrimaryDark"»68color/colorPrimaryDark«/item^ 
<item name-"colorAccent"»8color/colorAccent«c/item» 
«/style» 
我 们 将 style 元 素 的 parent 属性 值 改 为 “Theme.AppCompat. 
Light.NoActionBar" , Activity 就 没有 ActionBar 了 。 


15.22 ”设计 登录 界面 


QQ App 的 登录 页 面 (LoginFragment) ， 如 图 15-3 所 示 ( 界 
面 可 能 会 变样 ， 这 里 模仿 当前 的 样子 ) 。 我 们 先 来 整理 一 下 实现 
思路 。 


实现 要 点 概述 : 


e 页 面 是 一 个 Fragment。 

e 使 用 ConstraintLayout 摆 放 子 控件 。 
e 背景 是 一 张 图 片 。 

e 所 有 控件 都 是 半 透 明 的 。 


详细 制作 步骤 : 


(OD 找 一 张 背景 图 片 〈 最 好 是 PNG) ， 放 在 res/drawable 下 。 
(2) 制作 左上 角 的 企鹅 图 片 ( 最 好 是 PNG) ， 也 可 以 从 网 上 搜索 并 下 载 。 
G) HEA QQ 号 输入 框 ， 加 Layout 约束 。 


15-3 
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(D 在 QQ 号 输入 框 的 右边 放置 一 个 TextView， 设 置 其 内 容 为 特殊 字符 “V ”， 并 设置 
Layout 约束 。 

(5) 拖 入 密码 输入 框 ， 设 置 其 约束 。 

(6) 拖 入 按钮 ， 设 置 其 text 为 “登录 ”、 背 景色 为 淡 蓝 ， 并 设置 其 约束 。 

(7) 拖 入 两 个 TextView， 设 置 其 text 为 忘记 密码 和 新 用 户 登录 ， 并 设置 其 约束 。 

(8) 在 最 下 面 拖 入 一 个 横向 的 LinearLayout， 加 入 两 个 TextView， 分 别 设置 text 为 “ 登 
录 即 代表 阅读 并 同意 ”和 “服务 条 款 ”， 设 置 其 Layout， 并 设置 第 二 个 TextView 的 颜色 为 淡 
蓝 色 。 

(9) 除 了 最 上 面 的 QQ 图 标 和 文字 , 下 面 所 有 的 控件 都 要 设置 为 半 透 明 (alpha 属性 为 0.7) 。 

难点 : 


QQ 号 输入 框 看 起 来 比较 花哨 ， 因 其 右边 有 个 下 拉 箭 头 ， 当 点 这 个 箭头 时 ， 会 弹出 以 前 登 
录 过 的 QQ 号 和 头像 。 看 起 来 似乎 箭头 是 这 个 输入 框 的 一 部 分 ， 其 实 不 是 ， 是 另外 一 个 控件 ， 
只 是 把 它 放 到 了 输入 框 里 面 。 我 们 需要 响应 这 个 箭头 的 单 击 事件 , 在 其 中 弹出 类 似 于 菜单 的 控 
件 ， 在 菜单 中 列 出 登录 过 的 QQ 号 和 头像 。 


15.2.3 UI 代码 


下 面 是 LoginFragment 的 界面 设计 源码 ， 其 Layout 资源 是 fragment layout.xml, HH: 


<?xml version-"1.0" encoding="utf-8"?> 

<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:background-"6drawable/bg1" 
tools:context-".LoginFragment"^ 


«ImageView 
android:id="@+id/imageView" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_marginStart="20dp" 
android:layout_marginTop="40dp" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintTop toTopOf-"parent" 
app:srcCompat-"8drawable/qq" 
android:contentDescription-"Head"/-» 
«TextView 
android:id-"Qrid/textView" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
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android:layout marginStart-"8dp" 
android:fontFamily-"casual" 

android:text-"QQ" 
android:textColor-"Qandroid:color/white" 
android:textSiz: 36sp" 

android:textStyle-"bold" 

app:layout constraintBottom toBottomOf-"G *id/imageView" 


app:layout constraintLeft toRightof="@ 4id/imageView" 
app:layout constraintTop toTopOf="@+id/imageView"/> 


«EditText 


android:id="@+id/editTextQQNum" 
android:layout_width="0dp" 
android:layout_height="wrap_content" 
android:layout_marginStart="32dp" 
android:layout_marginEnd="32dp" 
android:layout_marginTop="40dp" 
android:alpha="0.8" 

android:ems="10" 

android:hint-"QQ 号 /手机 号 /邮箱 " 
android:inputType-"textPersonName" 

app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toBottomof-"G *id/imageView" 
app:layout constraintHorizontal bias-"0.0"/» 


«EditText 


android:id-"G(4id/editTextPassword" 

android:layout width-"0dp" 

android:layout height-"wrap content" 

android:layout marginTop-"11dp" 

android:alpha-"0.8" 

android:ems-"10" 

android:hint=" 密 码 " 

android:inputType-"textPassword" 

app:layout constraintHorizontal bias-"1.0" 

app:layout constraintLeft toLeftoOf: 4id/editTextQQNum" 
app:layout constraintRight toRightOf-"G-id/editTextQQNum" 
app:layout constraintTop toBottomOf-"0-id/editTextQQNum"/^ 


«Button 


android:id-"8*id/buttonLogin" 
android:layout width-"0dp" 
android:layout height- 


wrap content" 

android:layout marginTop-"15dp" 

android:alpha-"0.7" 

android:background-"8android:color/ holo blue light" 
android:text-"É3" 

app:layout constraintHorizontal bias-"0.0" 

app:layout constraintLeft toLeftOf-" @+id/editTextQQNum" 
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app:layout_constraintRight_toRightOof="@. +id/editTextQQNum" 

app:layout constraintTop toBottomOf="@+id/editTextPassword" /> 
<TextView 

android:id="@+id/textViewHistory" 


android:layout width-"wrap content" 


android:layout height-"wrap content" 
android:layout marginBottom-"8dp" 
android:layout marginEnd-"8dp" 
android: text=" V 


app:layout constraintBottom toBottomof: 


"Q-id/editTextQQNum" 
app:layout constraintRight toRightof="@ *id/editTextQQNum" 
app:layout constraintTop toTopOf-"G(-id/editTextQQNum" /> 

«TextView 
android:id-"8G*id/textViewForget" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginTop-"16dp" 
android:text=" 忘 记 密码 ?" 
android:textColor="eandroid:color/ holo blue dark" 
app:layout constraintLeft toLeftof: *id/buttonLogin" 
app:layout constraintTop toBottomOf-"(*id/buttonLogin" /> 

«TextView 
android:id-"Q(id/textViewRegister" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginTop-"16dp" 
android:text=" 新 用 户 注册 " 
android:textColor="@android:color/ holo blue dark" 
app:layout constraintRight toRightof-" Gxid/buttonLogin" 
app:layout constraintTop toBottomOf-"Q*id/buttonLogin" /> 

*LinearLayout 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
app:layout constraintBottom toBottomOf-"parent" 
android:layout marginBottom-"24dp" 
android:layout marginEnd-"8dp" 
app:layout constraintRight toRightOf-"parent" 
android:layout marginStart-"8dp" 
app:layout constraintLeft toLeftOf-"parent" 


android:orientation-"horizontal"-^ 


<TextView 
android:id="@+id/textView4" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android: text=" 登 录 即 代表 阅读 并 同意 " /> 


<TextView 
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android:id-"Qid/textView5" 
android:layout width- "match parent" 
android:layout height- "wrap content" 
android:text=" 服 务 条 款 " 
android:textColor- "eandroid:color/ 
holo blue light"/» 
«/LinearLayout» 


X/androidx.constraintlayout.widget.ConstraintLayout^ 


运行 App， 如 图 15-4 所 示 。 
15.2.4 显示 登录 历史 


要 完成 这 个 功能 ， 需 要 使 用 本 地 存储 ， 记 录 下 每 次 登录 成 功 的 —— 
QQ 号 ， 然 后 在 需要 显示 时 根据 历史 记录 创建 菜单 项 。 本 地 存储 这 
部 分 知识 现在 还 没 讲 ， 所 以 我 们 就 显示 固定 的 几 条 历史 。 图 154 

要 完全 模仿 QQ App 这 里 的 效果 不 是 那么 简单 , 因为 在 弹出 历史 记录 菜单 时 这 个 菜单 盖 住 
了 从 它 开始 的 位 置 一 直到 屏幕 最 底部 的 所 有 空间 。 也 就 是 说 , 从 密码 输入 框 开始 下 面 所 有 的 控 
件 都 看 不 到 了 ， 而 同时 这 个 菜单 还 是 半 透明 的 ， 效 果 如 图 15-5〈 菜 单 弹出 前 ) 和 图 15-6 GE 
单 弹出 后 ) 所 示 。 


ie | 
E "Ein : A 
> , 6788677665888 t d e x 
e788e77 less e x 
6788877665855 ex 
s 
图 15-5 图 15-6 
要 实现 此 效果 ,需要 把 QQ 号 输入 框 下 的 部 分 内 容 单独 拿 出 来 , 即 两 图 中 红 框 标 出 的 部 分 。 
要 为 这 块 区 域 准 备 两 个 子 页 面 ， 这 两 个 子 页 面 互相 蔡 换 ， 即 显示 一 个 时 另 一 个 隐藏 。 根 据 两 个 


子 页 面 中 控件 的 排版 特点 ， 第 一 个 子 页 面 的 根 View 应 为 ConstraintLayout， 第 二 个 子 页 面 的 根 
View 为 纵向 的 LinearLayout。 默 认 显示 第 一 个 子 页 面 。 这 两 个 子 页 面 还 得 有 一 个 容器 ， 这 个 
容器 当然 应 占据 整个 子 页 面 的 区 域 , 并 容纳 子 页 面 , 最 适合 做 这 个 容器 的 控件 是 FrameLayout, 
所 以 我 们 需要 改进 fragment_layout.xml 的 内 容 : 
«?xml version="1.0" encoding="utf-8"?> 
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
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android:layout_height="match_parent" 
android:background="@drawable/bg1" 
tools:context-".LoginFragment"-^ 


«ImageView 
android:id-"Qid/imageView" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"20dp" 
android:layout marginTop-"40dp" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintTop toTopOf-"parent" 
app:srcCompat-"8drawable/qq"/» 
«TextView 
android:id-"Qid/textView" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:fontFamily-"casual" 
android:text-"QQ" 
android:textColor-"8(android:color/white" 
android:textSize-"36sp" 
android:textStyle-"bold" 
app:layout constraintBottom toBottomOf-" Gxid/imageView" 
app:layout constraintLeft toRightO: G*id/imageView" 
app:layout constraintTop toTopOf-"Q(-id/imageView"/» 
«EditText 
android:id-"Q(4id/editTextQQNum" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginTop-"40dp" 
android:alpha-"0.8" 
android:ems-"10" 
android:hint-"QQ 号 /手机 号 /邮箱 " 
android:inputType-"textPersonName" 
app:layout constraintHorizontal bias-"0.0" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 


app:layout constraintTop toBottomof-"e *id/imageView" 
android:layout marginLeft-"32dp" 

android:layout marginRight-"32dp"/» 

«TextView 

android:id-"Qrid/textViewHistory" 

android:layout width-"wrap content" 

android:layout height-"wrap content" 

android:layout marginEnd-"16dp" 

android:layout marginTop-"i2dp" 
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android:padding-"5dp" 
android:text-"V" 


app 
app 


:layout constraintRight toRightof-" Q-id/editTextQQNum" 
:layout constraintTop toTopOf="@ *id/editTextQQNum" /> 


«FrameLayout 
android:layout width-"Odp" 
android:layout height-"0dp" 


app: 
app: 
app: 
app: 


app 


app: 


layout constraintBottom toBottomOf-"parent" 

layout constraintHorizontal bia: 0.0" 

layout constraintLeft toLeftOf-" Gxid/editTextQQNum" 
layout constraintRight toRightof-"e *id/editTextQQNum" 
:layout constraintTop toBottomof-"0-id/editTextQQNum" 


layout constraintVertical bias-"0.0"» 


*LinearLayout 


android: id="@+id/layoutHistory" 
android:layout_width="match_parent" 
android:layout height-"match parent" 
android:orientation-"vertical" 
android:visibility-"invisible"^ 


«/LinearLayout» 


«androidx.constraintlayout.widget.ConstraintLayout 


android: id-"G(id/layoutContext" 
android:layout width-"match parent" 
android:layout height-"match parent"> 


«EditText 


android:id-"Q(*id/editTextPassword" 
android:layout width-"0dp" 

android:layout height-"wrap content" 
android:alpha-"0.8" 

android:ems-"10" 

android:hint-" Hj" 
android:inputType-"textPassword" 

app:layout constraintHorizontal bias-"0.0" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toTopOf-"parent" /» 


«Button 
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android:id-"8id/buttonLogin" 

android:layout width-"Odp" 

android:layout height-"wrap content" 

android:layout marginTop-"13dp" 

android:alpha-"0.7" 
android:background-"8android:color/ holo blue light" 
android: text=" tx" 

app:layout constraintLeft toLeftOf-"parent" 


Ed 


app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toBottomOf="@+id/ 


editTextPassword" /» 
«TextView 


android:id-"Qid/textViewForget" 
android:layout width-"wrap content" 


android:layout height-"wrap content" 


android:layout marginTop-"16dp" 
android:text=" 忘 记 密码 ?" 
android:textColor="@android:color/holo blue dark" 

app:layout constraintLeft toLeftof-" QG*id/buttonLogin" 
app:layout constraintTop toBottomOf-"0-id/buttonLogin" 


«TextView 


android:id-"8G*id/textViewRegister" 


android:layout width: 


"wrap content" 


android:layout height-"wrap content" 
android:layout marginTop-"16dp" 
android:text=" 新 用 户 注册 " 
android:textColor="@android:color/ holo blue dark" 

app:layout constraintRight toRightof="@ *id/buttonLogin" 


app:layout constraintTop toBottomOf- 


*LinearLayout 


G*id/buttonLogin" 


android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginBottom-"24dp" 
android:layout marginEnd-"8dp" 

android:layout marginStart-"8dp" 

app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintLeft toLeftOf-"parent" 
app:layout constraintRight toRightOf-"parent" 
android:orientation-"horizontal"-^ 


*TextView 


android 


android: 


<TextView 


color/holo blue light" /> 
«/LinearLa 


android 
android 


android: 


android 


yout^ 


:id="@+id/textView4" 
android: 
android: 


layout width-"match parent" 


Æ 模仿 QQ App 界面 


/> 


/> 


layout height-"wrap content" 


text=" 登 录 即 代表 阅读 并 同意 "” /> 


:id="@+id/textView5" 
:layout_width="match_parent" 
android: 


layout_height="wrap_content" 


text=" 服务 条 款 " 


:textColor="@android: 


«/androidx.constraintlayout.widget.ConstraintLayout^ 


«/FrameLayout^ 


«/androidx.constraintlayout.widget.ConstraintLayout^ 
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注意 ,现在 在 QQ 号 输入 框 下 面 是 FrameLayout, 它 有 两 个 子 控件 :一 个 是 id 为 layoutHistory 
的 LinearLayout， 另 一 个 是 id 为 layoutContext 的 ConstraintLayout， 它 们 就 是 两 个 子 页 面 。 
layoutHistory 的 visibility 是 invisible， 即 不 可 见 ， 这 样 就 造成 初始 时 只 显示 layoutContext 的 内 
容 。 当 用 户 单 击 登录 框 右边 的 下 拉 稍 头 CtextViewHistory) 时 ， 隐 藏 layoutContext， 显 示 
layoutHistory。 我 们 用 layoutHistory 作为 历史 菜单 项 的 容器 ， 菜 单项 应 该 是 动态 创建 的 ， 我 们 
应 该 为 每 个 菜单 项 搞 一 个 单独 的 layout 资源 文件 ,从 它 创建 出 菜单 项 控件 ,加 入 到 layoutHistory 
中 。 那 为 什么 不 使 用 真正 的 菜单 (Menu) 呢 ? 原因 很 简单 ， 因 为 用 Menu 做 不 出 图 15-6 所 示 
的 效果 。 下 节 就 设计 历史 菜单 项 。 


15.2.5 ”设计 历史 菜单 项 


增加 一 个 Layout 资源 ， 文 件 名 叫 “login_history_item.xml”。 其 根 View 是 一 个 横向 的 
LinearLayout， 左 边 是 一 个 TextView 显示 QQ 号 ,右边 是 一 个 删除 图 标 ， 其 左边 紧 靠 它 的 是 一 
个 QQ 头像 图 片 ， 代 码 如 下 : 


<?xml version="1.0" encoding-"utf-8"?» 

*LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:orientation-"horizontal" 
android:layout width-"match parent" 
android:layout height-"41dp" 
android:gravity-"center vertical"^ 

<TextView 
android:id="@+id/textView2" 
android:layout_width="0dp" 
android:layout_height="wrap_content" 
android:layout_weight="1" 
android:text="6788877665555" /> 
<ImageView 
android:id="@+id/imageView2" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
app:srcCompat="@android:drawable/presence online"/> 
<TextView 
android:id="@+id/textViewDelete" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"10dp" 
android:layout marginEnd-"8dp" 
android:text-"X" /> 
«/LinearLayout^ 6788877665555 ex 


其 预览 如 图 15-7 所 示 。 


图 15-7 
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15.2.6 ”实现 显示 历史 的 代码 


响应 QQ 号 输入 框 右边 的 下 拉 箭 头 的 单 击 事件 , 在 LoginFragment 中 重 写 onViewCreated() 
方法 ， 为 控件 textViewHistory 设置 侦 听 器 : 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) { 
super.onViewCreated(view, savedInstanceState) 


this.textViewHistory.setOnClickListener ( 


) 
) 


在 侦 听 器 的 回调 方法 中 ， 我 们 要 创建 菜单 项 ， 加 入 到 layoutHistory 控件 中 ， 然 后 显示 
layoutHistory 控件 并 且 隐 藏 layoutContext 控件 : 


this.textViewHistory.setOnClickListener ( 
layoutContext.visibility = View.INVISIBLE 
layoutHistory.visibility = View.VISIBLE 
// UJ& 3 SCIT SERERE, SIBI 1ayoutHistory 办 
var layoutlItem = 
activity!!.layoutInflater.inflate(R.layout.login history item, null) 
layoutHistory.addView(layoutItem) 
layoutItem = 
activity!!.layoutInflater.inflate(R.layout.login history item, null) 
layoutHistory.addView(layoutItem) 
layoutItem = 
activity!!.layoutInflater.inflate(R.layout.login history item, null) 
layoutHistory.addView(layoutItem) 
} 


运行 一 下 ， 单 击 下 拉 图 标 ， 效 果 如 图 15-8 所 示 。 

效果 不 对 ， 继 续 改进 。 除 了 为 菜单 画 出 分 割 线 ， 还 " " 
要 保证 菜单 项 的 高 度 与 QQ 号 输入 框 的 高 度 一 样 。 我 们 | Eee n 
还 需要 保证 QQ 号 输入 框 的 下 边界 线 与 菜单 项 的 分 割 线 
完全 一 致 。 这 么 多 要 求 如 何 满足 呢 ? 最 简单 的 办 法 是 定 
制 菜 单项 根 控件 的 背景 。 图 15-8 

在 定制 背景 之 前 , 我 们 需要 先 学 习 一 种 新 的 Drawable 资源 selector， 它 是 专门 用 于 设置 控 
件 背景 的 。 


15.2.7 selector 资源 


^ 


selector 是 一 种 Drawable， 其 中 带 有 选择 的 意味 。Android 的 控件 可 以 有 多 种 状态 ， 比 如 
enable. disable. focus 等 ， 如 何在 视觉 上 体现 出 这 些 状 态 呢 ? 使 用 不 同 的 背景 是 个 好 办 法 。 为 
控件 设置 背景 必须 用 drawable 对 象 ， 可 以 是 图 片 ， 也 可 以 是 颜色 。 用 图 片 作 背 景 可 以 摘出 各 
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种 效果 ， 这 肯定 没有 问题 ， 但 是 制作 这 些 状 态 图 片 很 费劲 ， 而 且 控件 是 可 大 可 小 的 ， 图 片 跟着 
缩放 后 可 能 出 现 失真 。 于 是 Android 为 我 们 提供 了 叫 作 selector 的 drawable， 专 门 做 背景 ， 用 
来 解决 上 述 问题 。 


我 们 创建 一 个 Drawable 资源 , 作为 QQ 号 输入 框 背景 的 selector 定义 文件 ( 见 图 15-9) 。 


File name: edit bk selector| 


Source set: main 


Directory name: drawable 


图 15-9 
经 修改 后 的 ， 最 终 文件 内 容 如 下 : 


«?xml version-"1.0" encoding="utf-8"?> 


«selector xmlns:android-"http://schemas.android.com/apk/res/android"^ 
<item android:state focused-"true" android:drawable- 
"Gdrawable/edit bk normal" /> 


<item android:state focused-"false" android:drawable- 
"Gdrawable/edit bk normal" /> 
«/selector» 


它 包 含 了 两 个 item， 每 个 item 都 有 两 个 属性 (“state_ focused" fI “drawable” ) : 第 一 
个 属性 表示 对 应 的 状态 ， 第 二 个 属性 表示 此 状态 下 使 用 的 Drawable。 这 两 个 item 指定 了 控件 


在 有 焦点 和 无 焦点 时 使 用 的 Drawable。 由 于 我 们 的 控件 在 有 焦点 和 无 焦点 时 没有 差别 ， 因 此 


都 引用 了 同一 个 Drawable "edit_bk_normal"。 这 个 Drawable 并 不 是 一 个 图 片 文 件 , 而 是 一 个 叫 
作 “layer_list” 的 Drawable 资源 。 


15.2.8 layer list 资源 


我 们 先 创建 layer list 资源 〈 见 图 15-100. . 


e File 


Eile name: edit bk mormal 


Source set: main X 


Directon name: drawable 


15-10 
然后 把 源码 改 成 如 下 形式 : 


«?xml version-"1.0" encoding="utf-8"?> 
«layer-list xmlns:android-"http://schemas.android.com/apk/res/android" > 
«item android:top-"40dp"^ 
«shape android:shape-"line" > 
Xstroke android:width-"1px" 
android:color-"&FF000000" /> 
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<padding android:bottom="10dp" 
android:left-"2dp" 
android:right-"2dp" 
android:top-"10dp" /> 
«/shape» 
</item> 
</layer-list> 
layer list 也 是 一 种 Drawable。 从 字面 上 来 理解 ，layer list 是 层 列 表 的 意思 ， 其 可 以 包含 
多 个 <item>， 一 个 item 就 是 一 层 。 每 一 层 是 一 幅 图 像 ， 各 层 图 像 按 顺 序 上 下 摆 放 ， 上 面 覆 盖 
下 面 ， 重 县 组 合 出 最 终 效果 。 我 们 看 到 <item> 中 并 没有 引用 图 像 ， 而 是 定义 了 <shape>。shape 
是 一 个 形状 , 实际 上 它 定 义 了 一 幅 图 , 但 这 种 图 叫 矢量 图 。 与 图 像 文件 中 的 图 不 一 样 (图 像 文 
件 中 这 样 的 图 叫 栅 格 图 ) ,矢量 图 里 存 的 是 如 何 画 出 一 幅 图 的 代码 ,而 不 是 图 中 每 个 像素 的 颜 
f&, 显示 矢量 图 其 实 就 是 执行 代码 把 图 画 出 来 。 我 们 的 输入 框 只 需要 在 底部 显示 一 条 直线 , 很 
适合 用 矢量 图 。 
这 个 <shape> 中 包含 了 两 个 元 素 <stroke> 和 <padding>，stroke 定义 了 一 条 线 ， 说 明了 其 宽 
和 颜色 ， 而 padding 决定 了 这 个 线条 的 位 置 。 默 认 情况 下 ， 线 画 出 来 后 位 于 控件 纵向 的 中 央 ， 
通过 在 padding 中 设置 top 和 bottom 的 值 把 它 移 到 控件 的 底部 。 


15.2.9 ”定制 控件 背景 


Drawable 定义 好 了 ,把 它们 用 作 控 件 的 背景 ,首先 设置 成 QQ 号 输入 框 的 背景 ( 见 图 15-11)， 
再 设置 成 密码 输入 框 的 背景 。 


ETE EO NI alpha 08 
F FIC e X background. @drawable/edit bk selector 
ae x a \ ems uM 10 
" "37 >» hint QQ3/T 5/8 aoi 
图 15-11 


历史 菜单 项 也 应 该 使 用 这 个 背景 , 使 用 了 这 个 背景 之 后 可 以 保证 这 些 菜单 项 变 得 与 QQ 号 
输入 框 高 度 一 致 并 且 有 相同 的 分 割 线 〈 见 图 15-12) 。 


i login history itemoxml 


acras Eee FF 
eB elevation. 


运行 App， 效 果 如 图 15-13 所 示 。 E 
15.2.10 ”动画 显示 菜单 Nd p 


uo 3 
6788877665555 


QQ App 中 显示 历史 菜单 时 是 有 动画 的 ， 我 们 也 不 能 少 。 6782877665885 


虽然 Android 推荐 使 用 属性 动画 , 但 是 属性 动画 满足 不 了 我 们 
的 需求 ， 所 以 创建 一 个 View 动画 资源 〈 见 图 15-14) 。 15-13 
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File name: login histo: 


tl 
Resource type: ^ Animation m 

Root element: set 

Source set: main Y 


Directory name: anim 


15-14 
源码 如 下 : 


<?xml version-"1.0" encoding-"utf-8"?» 
«set xmlns:android-"http://schemas.android.com/apk/res/android"^ 
«alpha android:fromAlpha-"0.0" 
android:toAlpha-"1.0" 
android:duration-"100" /> 
<scale android:fromXScale-"0.5" 
android:toXScale-"1.0" 
android:fromYScale-"0.5" 
android:toYScale-"1.0" 
android:pivotX-"502" 
android:pivotY-"02z" 
android:duration-"100" 
android:fillBefore-"false" /> 
«/set» 


iE XE. android:ivotX-"5096" 表示 在 横向 上 的 缩放 是 从 中 心 位 置 开 始 的 ， 
android:pivotY="0%" 表示 在 纵向 上 的 缩放 是 从 顶部 开始 的 。 

下 面 使 用 这 个 动画 资源 。 在 响应 下 拉 箭 头 的 单 击 事件 中 , 向 layoutHistory 中 添加 历史 菜单 
项 之 后 ， 为 layoutHistory 显示 过 程 设 置 动 画 : 


this.textViewHistory.setOnClickListener ( 
layoutContext.visibility - View.INVISIBLE 
layoutHistory.visibility - View.VISIBLE 
// Ül& 3 XII SERERE, RUMP 1ayoutHistory 办 
var layoutlItem = activity!!.layoutInflater.inflate 
(R.layout.login history item, null) 
layoutHistory.addView (layoutItem) 


layoutItem = activity!!.layoutInflater.inflate 
(R.layout.login history item, null) 

layoutHistory.addView (layoutItem) 

layoutlItem = activity!!.layoutInflater.inflate 
(R.layout.login history item, null) 

layoutHistory.addView (layoutItem) 


/ / QADAR ALR 
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val set- AnimationUtils.loadAnimation(context,R.anim.login history anim) 
as AnimationSet 
layoutHistory.startAnimation (set) 
} 


运行 App， 登 录 历 史 的 显示 时 有 动画 了 。 
15.2.11 让 菜单 消失 

当 单 击 菜单 项 之 外 的 区 域 时 , 应 该 让 菜单 消失 , 即 隐藏 layoutHistory, 显示 layoutContext。 
这 如 何 实现 呢 ? 可 以 为 所 有 可 能 单 击 的 控件 设置 单 击 响 应 侦 听 器 , 在 其 中 切换 两 个 控件 。 实际 


上 不 用 这 么 麻烦 也 可 以 做 到 ， 只 要 为 最 外 层 的 控件 设置 侦 听 器 即 可 。 最 外 层 的 控件 就 是 
Fragment 的 根 View， 也 是 onViewCreate() 方 法 的 第 一 个 参数 。 下 面 我 们 为 它 设置 侦 听 器 : 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) ( 
super.onViewCreated(view, savedInstanceState) 


this.textViewHistory.setOnClickListener ( 
layoutContext.visibility = View.INVISIBLE 
layoutHistory.visibility = View.VISIBLE 
// BI 3 XXI] SERE, SIUS 1ayoutHistory 办 
for (i in 0..2) { 
val layoutItem - activity!!.layoutInflater.inflate( 
R.layout.login history item, null) 
layoutHistory.addView(layoutItem) 
) 


/ HIERTSIIBHE IE EUR 

val set- AnimationUtils.loadAnimation(context, 
R.anim.login history anim) as AnimationSet 

layoutHistory.startAnimation (set) 


} 


// ØRA View BIB EE, BUT EHK 
view.setOnClickListener { 
if (layoutHistory.visibility === View.VISIBLE)( 
layoutContext.visibility = View.VISIBLE; 
layoutHistory.visibility = View.INVISIBLE; 


) 

在 其 中 先 判断 当前 是 否 显示 了 历史 菜单 ， 如 果 是 , 就 切换 两 个 页 面 。 还 需要 注意 的 是 创建 
菜单 项 的 地 方 ， 我 们 改 成 用 for 循环 来 创建 三 个 菜单 项 。 

还 有 问题 , 现在 在 菜单 项 上 单 击 时 也 会 隐藏 历史 菜单 。 我 们 应 该 把 菜单 项 中 的 QQ 号 取出 
来 设置 到 输入 框 中 ， 如 何 处 理 呢 ? 下 节 分 解 。 
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15.2.12 ”响应 选中 菜单 项 
我 们 需 响应 菜单 项 的 单 击 , 在 响应 方法 中 把 QQ 号 取出 并 设置 到 输入 框 中 。 把 侦 听 器 设置 
到 菜单 项 的 根 View 中 ， 代 码 如 下 : 


this.textViewHistory.setOnClickListener ( 
View.INVISIBLE 


layoutContext.visibility 
layoutHistory.visibility = View.VISIBLE 
// ül& 3 REWERA, RUMP 1ayoutHistory 办 


for (i in 0..2) { 
val layoutItem = activity!!'.layoutInflater.inflate( 


R.layout.login history item, null) 
JL BUE IU Hz, ÈRTA BAMAR 
layoutItem.setOnClickListener ( 
editTextQQNum.setText ("123384328943894893") 
layoutContext.visibility = View.VISIBLE 
layoutHistory.visibility = View.INVISIBLE 


) 
layoutHistory.addView(layoutItem) 


) 
/ LIEBISIIBEE D ER 
val set- AnimationUtils.loadAnimation(context, 
R.anim.login history anim) as AnimationSet 
layoutHistory.startAnimation (set) 
) 
注意 ,本 应 把 菜单 项 中 的 QQ 号 取出 来 再 设置 到 输入 框 中 CeditTexiQQNum 是 QQ 号 输入 
框 》， 我 们 只 是 随便 设置 了 一 堆 数 字 ， 因 为 目前 只 是 做 原型 ， 实 际 的 功能 后 面 再 做 。 
下 面 是 onViewCreatedO0 的 全 部 代码 : 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) { 


super.onViewCreated(view, savedInstanceState) 


this.textViewHistory.setOnClickListener ( 
layoutContext.visibility - View.INVISIBLE 
layoutHistory.visibility = View.VISIBLE 
// Bl& 3 简历 史记 如 吴江 项 ， 洲 加 到 1ayoutHistory 办 
for (i in 0..2) { 
val layoutItem = activity!!.layoutInflater.inflate( 
R.layout.login history item, null) 


/L LBLBEREBE EM d, WER BARRAR 


layoutItem.setOnClickListener { 
editTextQQNum.setText ("123384328943894893") 


layoutContext.visibility = View.VISIBLE 
layoutHistory.visibility = View.INVISIBLE 


) 
layoutHistory.addView(layoutItem) 
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val set- AnimationUtils.loadAnimation(context, 
R.anim.login history anim) as AnimationSet 
layoutHistory.startAnimation(set) 


) 
// DERIER view PI EE, EDEKA 


view.setOnClickListener ( 
if(layoutHistory.visibility === View.VISIBLE)( 
layoutContext.visibility = View.VISIBLE; 
layoutHistory.visibility = View.INVISIBLE; 


) 

运行 App， 可 以 发 现 历史 菜单 的 显示 与 隐藏 以 及 选中 后 的 行为 都 没 问 题 了 。 但 是 只 设置 
Fragment 根 View 的 Click (Hii) 侦 听 器 时 ， 单 击 某 个 菜单 项 执行 的 是 根 View 的 响应 代码 。 
此 事件 是 菜单 项 先 收 到 的 , 但 菜单 项 把 事件 最 终 传 给 了 对 此 事件 有 侦 听 器 的 某 个 祖先 ; 当 为 菜 
单项 设置 了 Click 侦 听 器 时 ， 单 击 菜单 项 ， 执 行 的 就 是 菜单 项 的 侦 听 器 ， 并 且 根 View 的 侦 听 
器 不 再 被 执行 ， 这 说 明了 什么 ? 说 明 只 要 设置 了 侦 听 器 ， 所 侦 听 的 事件 就 不 再 被 往 父 辈 传 递 。 
所 以 ， 一 个 控件 的 某 个 事件 发 生 后 ， 事 件 是 可 以 被 传递 的 ， 传 递 是 有 路 由 算法 的 。 最 基本 的 规 
则 就 是 :如 果 一 个 控件 未 处 理 收 到 的 事件 , 则 向 祖先 传递 ,直到 找到 一 个 能 处 理 此 事件 的 祖先 ， 
一 旦 事件 被 某 个 控件 处 理 ,就 不 再 传递 ;如 果 直 到 最 后 也 没有 找到 控件 处 理 , 则 此 事件 被 扔 掉 。 

登录 完成 ， 下 面 研究 主页 面 。 


15.3 QQ 主页 面 设计 


我 们 的 App 最 终 效果 如 图 15-15 所 示 。 
首先 上 面 的 导航 栏 ( 蓝 色 部 分 ) ， 不 是 真正 的 ActionBar。 最 下 
面 是 一 个 Tab 栏 ， 中 间 是 一 个 分 页 控件 (ViewPager) 。 当 我 们 选择 
不 同 的 Tab 项 时 ， 中 间 区 域 的 页 面 发 生 切 换 ， 同 时 导航 栏 中 间 的 标题 
和 右边 的 图 标 会 跟着 变 ， 但 看 起 来 导航 栏 本 身 并 没有 变 。 所 以 我 们 对 

这 个 页 面 的 设计 方案 是 : 

e 上面 一 个 横向 LinearLayout 作为 导航 栏 。 © : 
e 下 面 一 个 TabLayout 作为 Tab 栏 。 e: 
B 
e 


e 中 间 一 个 ViewPager 容纳 各 子 页 面 。 


ViewPager 是 一 种 可 以 容纳 多 个 View 的 控件 ， 但 是 与 Layout 控 
件 不 同 ， 它 某 个 时 刻 只 能 显示 其 中 一 个 View， 另 一 个 View 显示 时 ， 


2 


15-15 
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当前 的 View 就 隐藏 。 每 个 View 相当 于 一 个 页 面 ， 这 就 是 它 名 字 的 由 来 。 它 是 非常 适合 作为 
主 内 容 区 容器 的 ， 并 且 经 常 与 TabLayout 相互 配合 实现 Tab 翻 页 效果 。 

我 们 首先 要 把 这 个 页 面 对 应 的 Fragment 创建 出 来 ， 所 以 创建 一 个 新 的 Fragment， 命 名 为 
MainFragment ( WLK] 15-16) 。 

下 面 先 把 MainFragment 的 UI 搭 起 来 。 因 为 整个 页 面 是 上 下 结构 的 , 所 以 最 外 层 放 一 个 纵 
向 的 LinearLayout， 上 面 放 一 个 横向 的 LinearLayout， 设 置 它 的 高 度 为 50dp， 中 间 放 一 个 
ViewPager， 下 面 放 一 个 TabLayout， 把 TabLayout 的 高 度 也 设 为 54dp。 为 了 让 ViewPager i 
据 中 间 所 有 空间 并 正确 显示 TabLayout， 需 把 ViewPager 的 layout height 置 为 0dp， 然 后 把 
layout weight 置 为 1。 预览 界面 看 起 来 如 图 15-17 所 示 。 


| 


Creates a blank fragment that is compatible 
back to API level 4. 


Fragment Name: Moinfragment 
uf Create layout XML? 


Fragment Layout Name: | fragment main 


.ViewPager | 
C Include fragment factory methods? 
[ Include interface callbacks? 
Source Language: Kotlin hd 
Target Source Set: main - un m 
图 15-16 图 15-17 


Fragment main.xml 源码 如 下 : 


<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns:tools- "http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:orientation-"vertical" 
tools:context-".MainFragment"^ 
<!-- 9) E 
*LinearLayout 
android:layout width-"match parent" 
android:layout height-"50dp" 
android:orientation-"horizontal"^ 
«/LinearLayout^ 
er-EWEKX-- 
Xandroidx.viewpager.widget.ViewPager 
android:id-"Qrid/viewPager" 
android:layout width-"match parent" 
android:layout height-"Odp" 
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android:layout weight-"1" /> 
«1--Tab feff-— 
Xcom.google.android.material.tabs.TabLayout 
android:layout width-"match parent" 
android:layout height-"54dp"^ 
Xcom.google.android.material.tabs.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"Left" /> 
Xcom.google.android.material.tabs.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"Center" /> 
Xcom.google.android.material.tabs.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"Right" /> 
«/com.google.android.material.tabs.TabLayout^ 
«/LinearLayout^» 


登录 成 功 后 才能 进入 此 页 面 。 我 们 先 把 页 面 跳 转 代码 完成 才能 看 到 这 个 页 面 。 在 
LoginFragment 的 onViewCreated0 中 ， 为 登录 按钮 设置 Click 侦 听 器 ， 代 码 如 下 : 
/LLBLBEBORTEHIII E s EF 
buttonLogin.setOnClickListener ( 
val fragmentManager = activity!!.supportFragmentManager 
val fragmentTransaction - fragmentManager.beginTransaction() 
val fragment = MainFragment() 
// Bhi FrameLayout PHAHI Fragment 
fragmentTransaction.replace (R.id.fragment_container, fragment) 
11k URASTE P, BIER UTEK TBR A pE 6I E — b CT 
fragmentTransaction.addToBackStack ("login") 
fragmentTransaction.commit () 


} 


从 预览 界面 可 以 看 到 ， 虽 然 主要 控件 可 以 看 到 ， 但 是 配色 不 对 ， 内 容 也 不 全 。 下 面 我 们 一 
一 修正 。 


15.3.1 设置 导航 栏 


导航 栏 左边 是 QQ 头像 ， 中 间 是 标题 ， 右 边 是 一 个 “+”。 只 需要 把 这 三 样 加 到 代表 导航 
栏 的 Layout 中 即 可 。 左 边 的 控件 是 ImageView， 中 间 的 是 TextView， 右 边 用 一 个 TextView。 
然后 设置 左边 的 靠 左 , 右边 的 靠 右 , 中 间 的 充满 剩余 空间 , 但 其 内 容 居中 。 最 后 设置 整个 Layout 
的 内 容 纵向 居中 。 其 余 细节 见 源 码 : 

e--glt-- 


*XLinearLayout 
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android:layout width-"match parent" 
android:layout height-"50dp" 
android:gravity-"center vertical" 
android:orientation-"horizontal" 
android:paddingLeft-"16dp" 
android:paddingRight-"16dp"^ 
XImageView 
android:id-"Q(4id/imageView3" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
app:srcCompat-"?android:attr/textSelectHandle" /> 
«TextView 
android:id-"G*id/textView3" 
android:layout width-"0dp" 
android:layout height-" 
android:layout weight-"1" 
android:gravity-"center horizontal" 
android:text=" 标 题 " 
android:textSize-"18sp" /> 
<TextView 
android:id="@+id/textView6" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android: text="+" 
android:textSize-"36sp" /> 
</LinearLayout> 


然而 ， 导 航 栏 的 背景 还 是 不 对 ，QQ App 中 的 背景 是 一 个 蓝 色 的 渐变 ， 左 边 深 ， 右 边 浅 。 
如 何 实现 这 样 的 背景 呢 ? 用 selector， 从 理论 上 讲 ， 只 要 是 Drawable 都 可 以 作为 背景 ， 我 们 并 
不 想 让 导航 栏 在 不 同 状态 下 有 不 同 的 背景 ,也 可 以 不 用 selector。 打 开 文 件 edit_bk_normalxml， 
可 以 看 到 <layer-list> 的 <item> 中 包含 了 <shape> (shape 是 形状 的 意思 ) 。 实 际 上 <shape> 也 可 以 
作为 一 个 Drawable 资源 文件 的 根 元 素 。 我 们 为 导航 栏 创建 作为 背景 的 Drawable 资源 
nav_bar_bk.xml， 内 容 如 下 : 


rap_content" 


«?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape-"rectangle"^ 
Xgradient android:startColor-"&FFOO0AOFF" 
android:endColor-"£&FFBOBFFE" 
android:angle-"0" /> 
«/shape» 


这 个 资源 文件 定义 了 一 个 gradient (渐变 ) 。 下 面 我 们 把 它 作为 导航 栏 的 LinearLayout 的 
背景 : 
<!-- gp 


XLinearLayout 
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android:layout width-"match parent" 
android:layout height-"50dp" 
android:gravity-"center vertical" 
android:orientation-"horizontal" 
android:paddingLeft-"1l6dp" 
android:paddingRight-"16dp" 
android:background- "Gdrawable/: nav bar bk"> 


eiit E |) 


15.3.2 设置 Tab 栏 


15-18 
首先 我 们 为 TabLayout 设置 id (命名 为 tabLayout) , 
因为 马上 要 在 代码 中 操作 它 : 
«!--Tab feff--» 


Xcom.google.android.material.tabs.TabLayout 
android:layout width-"match parent" 
android:layout height-"54dp" 
app:tabBackground-"Gdrawable/tab bar bk" 
app:tabIndicatorColor-"8android:color/transparent" 
app:tabSelectedTextColor-"8android:color/holo blue light" 
android:id-"G(id/tabLayout"^ 


Tab 栏 背 景 是 白色 的 ， 可 以 认为 没有 背景 ， 但 是 它 却 有 上 边缘 。 为 了 做 出 这 个 效果 ， 还 是 
要 设置 背景 的 ， 并 且 背 景 必 须 用 矢量 图 Drawable。Tab 的 每 个 Item 都 有 图 像 ， 我 们 需要 找到 
这 三 张 图 加 到 项 目 中 。 可 以 在 网 上 找 三 个 差不多 的 图 标 。 

消息 图 标的 文件 名 与 图 像 如 图 15-19 所 示 。 


-1 drawable 
li bg1.png 
I edit bk normalxml 


B edit bk selector.xml, 
E message focus fig 


E message normal.p! 
I nav bar bkxml 
E qq.png 


图 15-19 
联系 人 图 标的 文件 名 与 图 像 如 图 15-20 所 示 。 


lij contacts focus.png ; 1 
国 contacts normal.png 


15-20 
动态 (QQ 空间 ) 图 标的 文件 名 与 图 像 如 图 15-21 所 示 。 
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E] space normal.png — : a 
[È] spacs focus.png : 


15-21 
把 这 几 个 图 标 设置 到 对 应 的 TabItem (AR 15-22) ， 效 果 如 图 15-23 MR. BET. F 
面 把 上 边缘 线 设 计 出 来 。 
"'omponentTree y= 
EERTE layout width wrap content. - 
* 四 Lineartayout horizontal layout height wrep. content ~ 
四 imageView3 
Es S "x Y Tabltem 
Ab textView6- "+ A iei =n 
El viewPager > | @drawable/message nom 
me TabLayout 了 Favorite Attributes 
CB Tabtem A eid 
O Tabltem A DS 
图 15-22 


像 导 航 栏 一 样 ， 创 建 一 个 Shape Drawable 可 以 吗 ? 不 可 以 ! 直接 以 shape 矢量 图 作 资源 ， 
其 位 置 很 难 调整 正确 ,所 以 必须 用 layer-list, 因为 它 里 面 的 <shape> 位 置 可 调 。 创 建 一 个 layer-list 
drawable 文件 ， 命 名 为 tab bar bkxml， 其 内 容 为 : 


<?xml version-"1.0" encoding="utf-8"?> 
<layer-list xmlns:android-"http://schemas.android.com/apk/res/android" > 
<item android:top="-54dp"> 
<shape android:shape="line" > 
<stroke 
android:width="1px" 
android:color="#FF808080" /> 
<padding 
android:bottom="0dp" 
android:left-"2dp" 
android:right-"2dp" 
android:top-"Odp" /> 
«/shape» 
</item> 
</layer-list> 


把 tab_bar_bk 设置 为 TabLayout 控件 的 background， 上 边界 就 出 现 了 ( 见 图 15-24) 。 


消息 联系 人 动 消息 联系 人 动态 
图 15-23 图 1524 
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此 时 一 个 Item 被 选中 时 ， 图 标 和 文字 没有 变 成 蓝 色 ， 而 是 下 面 出 现 红 线 。 这 个 问题 怎么 
解决 呢 ? 为 TabLayout 设置 几 个 属性 〈 见 图 15-25〉。 


tablndicatorColor @android:color/transparent 


tablndicatorHeight 


tabContentStart 

tabBackground @drawable/tab_bar bk 

tabindicator 

tabindicatorGravitý none v 


tabindicatorAnimationDuration 


tabindicatorFullWidth a 
tabMode none E 
tabGravity none - 
tabinlineLabel a 
tabMinWidth 
tabMaxwidth 
labTextAppearance Design.Tab - 
tebTextColor in" 
tabSelectedTextColor Gandroic:color/holo blue light 

图 15-25 


我 们 把 tabIndicatorColor 的 值 改 为 “@android:colortransparent”, 使 得 选中 时 的 红线 消失 。 
transparent 是 透明 的 意思 ,透明 之 后 就 看 不 到 了 。 同 时 还 设置 了 tabSelectedTextColor 属性 , 它 
决定 了 Item 被 选中 时 文本 的 颜色 。 现 在 就 剩 下 图 片 的 颜色 在 选中 时 没有 变化 ， 要 实现 这 个 功 
能 ， 请 看 下 节 。 


15.3.8 ”改变 Tab Item 图 标 


我 们 可 以 在 属性 编辑 器 中 为 Tab Item 设置 图 标 ， 但 是 无 法 为 它 设置 选中 时 的 图 标 。 可 以 
响应 Tab Item 选择 的 change 事件 , 在 Item 被 选中 时 设置 一 个 图 标 , 在 它 变 为 非 选中 状态 时 设 
置 另 一 个 图 标 。 首 先 像 下 面 这 样 设 置 TabItem 选择 事件 侦 听 器 : 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) ( 
super.onViewCreated(view, savedInstanceState) 


tabLayout.addOnTabSelectedListener (object : 
TabLayout.OnTabSelectedListener ( 
override fun onTabSelected(tab: TabLayout.Tab) () 
override fun onTabUnselected(tab: TabLayout.Tab) () 
override fun onTabReselected(tab: TabLayout.Tab) () 
H) 
} 


这 个 侦 听 器 接口 声明 了 三 个 需要 我 们 实现 的 方法 ， 从 方法 名 就 能 判断 出 其 作用 。 其 中 ， 
onTabSelected0 在 一 个 item 被 选中 后 调用 , onTabUnselected0 在 item 从 选中 状态 变 为 非 选中 状 
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态 后 被 调用 ，onTabReselected0 在 一 个 item 被 重新 选中 时 被 调用 。 这 三 个 方法 都 有 一 个 相同 类 
型 的 参数 tab， 它 是 一 个 Tabltem 对 象 ， 通 过 它 可 以 获取 发 生 事件 的 TIem， 最 终 实现 代码 如 下 : 


tabLayout .addonTabSelectedListener (object : TabLayout.OnTabSelectedListener { 
override fun onTabSelected(tab: TabLayout.Tab) { 


when ( 
tab.position === 0 -> tab.setIcon(R.drawable.contacts focus) 
tab.position === 1 -> tab.setIcon(R.drawable.message focus) 


else -> tab.setIcon(R.drawable.spacs focus) 
) 


) 
override fun onTabUnselected(tab: TabLayout.Tab) ( 


when ( 
tab.position = 0 -> tab.setlIcon(R.drawable.contacts normal) 
tab.position = 1 -» tab.setIcon(R.drawable.message normal) 


else -> tab.setIcon(R.drawable.space normal) 


j 


) 
override fun onTabReselected(tab: TabLayout.Tab) { 


when ( 
tab.position === 0 -> tab.setIcon(R.drawable.contacts focus) 
tab.position === 1 -> tab.setIcon(R.drawable.message focus) 


else -> tab.setlIcon(R.drawable.spacs focus) 


1) 

现在 运行 的 话 ， 点 TabItem， 会 看 到 文字 与 图 标 都 有 变化 ， 但 是 还 是 有 点 问题 ， 就 是 初始 
时 显示 的 是 消息 页 面 ,但 是 对 应 的 TabItem 并 没有 处 于 选中 状态 , 这 需要 我 们 在 onViewCreated() 
中 将 消息 Item 置 为 选中 状态 : 


/ B.E Tabrtem EJE PRE 
tabLayout.getTabAt (0)?.setIcon(R.drawable.message focus) 


15.3.4 33 ViewPager 添加 内 容 


中 间 内 容 区 是 一 个 ViewPager， 从 名 字 可 以 猜 出 它 是 提供 翻 页 效果 的 控件 。 它 可 以 包含 多 
个 子 View， 一 个 子 View 就 是 一 页 ， 同 一 时 刻 只 能 显示 一 页 ， 可 以 在 页 之 间 切 换 。 它 是 从 
ViewGroup 派生 的 。 除 Layout 之 外 的 ViewGroup， 都 需要 用 Adapter 为 它们 提供 子 控件 。 
ViewPager 也 是 这 样 一 种 控件 。 

QQ 主页 面 中 三 个 TabItem 对 应 页 的 内 容 都 是 列表 的 形式 ， 所 以 这 三 个 页 都 可 以 使 用 
RecyclerView 作为 主要 控件 。 但 是 不 能 直接 在 界面 设计 器 中 将 这 三 个 RecyclerView 拖 到 
ViewPager 中 ， 想 想 Adapter 的 使 用 思路 ， 是 不 是 应 该 在 Adapter 的 某 个 回调 方法 中 创建 页 面 
的 View? 下 面 是 Adapter 类 的 代码 (作为 MainFragment 内 部 类 ) : 
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// 为 ViewPager JE — E BOAE2S 
internal inner class ViewPageAdapter : PagerAdapter() ( 
override fun getCount(): Int ( 
return listViews.length 


override fun isViewFromObject(view: View, obj: Any): Boolean ( 
return view == obj 


) 


// SEBITE— T view, container T View Faf, Bb ViewPager, 
//position KMKK, M o Iit 


override fun instantiateItem (container: ViewGroup, position: Int): Any { 
val v = listViews [position] 
V1 BRUMA RAE 
container.addView (v) 
return v!! 


} 


override fun destroyItem (container: ViewGroup, position: Int, obj: Any) { 
container .removeView (obj as View) 
} 
} 


解释 一 下 各 方法 。 

* instantiateltem() 

ViewPager 在 创建 页 View 时 调用 的 方法 是 instantiateItem0, 返回 页 View 对 象 , 但 实际 上 
我 们 并 不 是 在 此 方法 中 创建 的 页 View， 而 是 在 Adapter 类 的 外 部 类 MainFragment 的 构造 方法 
中 就 创建 了 ， 在 instantiateItem0 中 只 是 返回 对 应 的 页 View 就 行 了 ， 这 样 做 是 为 了 避免 多 次 创 
建 页 View。 注 意 其 中 container.addView0 这 一 句 ， 必 须 在 instantiateItem0 中 把 子 View 加 入 到 
容器 View 中 。 

listViews 是 一 个 ArrayList 型 变量 ,包含 了 三 个 页 View 的 实例 ,是 MainFragment 的 属性 : 

class MainFragment : Fragment() ( 


// UBI — NEC HEPER, AXES 


private val listViews = arrayOfNulls«RecyclerView» (3) 


我 们 在 MainFragment 的 onCreate0 方 法 中 创建 三 个 页 View 的 实例 : 


override fun onCreate(savedInstanceState: Bundle?) { 


super.onCreate (savedInstanceState) 

//Bf& -4* Recyclerview, HAIXE 00 HEH, 00 KRAH., 00 FJA 
listViews[0]=RecyclerView (context!!); 
listViews[1]=RecyclerView (context!!); 
listViews[2]=RecyclerView (context!!); 


LL UB TIR TEAR FIBER EAPRSIIEER E 
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listViews[0]!'.setBackgroundColor (Color.RED); 

listViews[1]!'.setBackgroundColor (Color.GREEN); 

listViews[2]!'.setBackgroundColor (Color.BLUE); 
) 


* getCount() 

返回 ViewPager 中 的 页 数 。 

* destroyltem() 

此 方法 必须 实现 ， 用 于 在 销毁 页 View 时 调用 ， 但 我 们 不 想 销 毁 ， 所 以 只 是 把 页 View 从 
容器 中 删除 。 

* isViewFromObject() 

此 方法 用 于 告诉 ViewPager 在 创建 页 View 时 有 没有 在 外 面包 装 了 什么 东西 。 例 如 ， 在 
RecyclerView 的 Adapter 中 ， 创 建 一 项 对 应 的 View 时 ， 不 是 直接 返回 View， 而 是 包 在 了 一 个 
ViewHolder 中 。 我 们 也 可 以 在 此 处 这 样 做 ， 另 创建 一 个 类 ， 把 真正 的 子 View 包 在 其 中 ， 那 么 
此 时 在 instantiateItemO 中 返回 的 就 是 包装 类 的 实例 ， 于 是 在 isViewFromObject0 中 就 需要 返回 
false 了 。 对 传 入 的 参数 进行 比较 , 如 果 相 同 就 返回 true, 否则 返回 false, 这 是 一 般 的 通用 做 法 。 

以 下 三 句 代码 为 三 个 页 面 设置 了 不 同 的 背景 ， 仅 仅 用 于 测试 : 

listViews[0]!'.setBackgroundColor (Color.RED); 

listViews[1]!'.setBackgroundColor (Color.GREEN); 
listViews[2]!'.setBackgroundColor (Color.BLUE); 

创建 了 Adapter 类 后 ， 还 要 将 Adapter 设置 给 ViewPager， 我 们 把 这 堆 代 码 放 到 
MainFragment 的 onViewCreated0 中 : 


Jf Adapter HES ViewPager Stffl 


viewPager.adapter = ViewPageAdapter() 


运行 App， 登 录 ， 应 看 到 如 图 15-26 所 示 的 效果 ， 左 右 滑动 可 翻 页 ( 见 图 15-27) 。 


图 15-26 图 15-27 
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15.3.5 ViewPager 5 TabLayout 联动 


ViewPager 5j TabLayout 还 没有 关联 起 来 ， 所 以 现在 单 击 TabItem BI, ViewPager 没有 翻 

页 ; 同时 ViewPager 翻 页 时 ，TabItem 也 没有 切换 。 如 何 能 让 它们 联动 呢 ? 从 理论 上 讲 ， 就 是 

响应 各 自 的 事件 , 在 其 中 调用 对 方 相应 的 方法 。 比 如 响应 ViewPager 的 页 面 切换 事件 , 在 其 中 

选中 对 应 的 TabItem; 同时 响应 Tab Item 的 Item 选择 事件 ， 在 其 中 切换 ViewPager 中 对 应 的 

页 面 。Android 已 经 为 ViewPager 与 LayoutTab 的 联动 提供 了 部 分 内 置 逻 辑 ， 我 们 可 以 做 少量 
工作 就 使 它们 在 一 起 ， 下 面 就 是 实现 代码 : 


tabLayout.setupWithViewPager (viewPager); 


我 们 也 要 把 它 放 在 MainFragment 的 onViewCreated0 中 。 运 行 App， 看 看 效果 (图 15-28 
是 消息 页 面 ， 图 15-29 是 联系 人 页 面 ) 。 


图 15-28 图 15-29 
有 些 Tab Item 不 见 了 ， 但 是 用 手 在 相应 位 置 单 击 一 下 ， 发 现 还 有 效果 ， 能 引起 翻 页 。 这 
说 明 Tab Item 还 在 ， 而 且 TabLayout 与 ViewPager 已 经 正确 关联 。 但 是 ，TabItem 上 的 内 容 不 
见 了 , 原因 是 当 它们 两 个 合体 时 , TabLayout 希望 由 ViewPager 来 决定 Tab Item. 上 显示 的 内 容 ， 
所 以 直接 设置 到 TabItem 上 的 内 容 被 忽略 了 。 由 ViewPager 决定 的 话 ， 实 际 上 是 TabLayout 调 
用 ViewPager 的 某 个 方法 ,经 研究 ,最 终 是 调用 了 ViewPager 的 Adapter 的 方法 getPageTitleQ, 
所 以 我 们 要 重 写 Adapter 类 的 此 方法 ， 代 码 如 下 CViewPageAdapter 中 ) : 


override fun getPageTitle(position: Int): CharSequence? { 


if (position -- 0) ( 
return "消息 " 

) else if (position -- 1) ( 
return "联系 人 " 

) else if (position -- 2) ( 


return "动态 " 
) 
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return null 


} 
再 次 运行 App， 效 果 如 图 15-30 所 示 。 


TabItem 的 文字 终于 出 来 了 ! 但 是 ， 有 的 又 没有 图 像 da NETT A ONT: 
了 。 单 击 一 下 , 它 的 图 像 又 出 来 了 。 其 实 解决 起 来 很 简单 


在 将 TabLayout 与 ViewPager 关联 起 来 之 前 就 为 
ViewPager 设置 适配器 。 下 面 是 整个 onViewCreated0 的 代码 : 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) ( 
super.onViewCreated(view, savedInstanceState) 


//1& Adapter HES ViewPager Eø, EXP THEME 
viewPager.adapter = ViewPageAdapter () 
tabLayout .setupWithViewPager (viewPager); 


// HB TabItem BUE TA 
tabLayout.getTabAt (0)?.setIcon(R.drawable.message focus) 
tabLayout.getTabAt(1)?.setIcon(R.drawable.contacts normal) 
tabLayout.getTabAt (2)?.setIcon(R.drawable.space normal) 
tabLayout.addOnTabSelectedListener (object : 
TabLayout.OnTabSelectedListener { 
override fun onTabSelected(tab: TabLayout.Tab) ( 


when ( 
tab.position --- -> tab.setIcon(R.drawable.contacts focus) 
tab.position === 1 -> tab.setIcon(R.drawable.message focus) 


else -> tab.setlIcon(R.drawable.spacs focus) 


) 
override fun onTabUnselected(tab: TabLayout.Tab) ( 
when ( 
tab.position 0 -> tab.setlIcon(R.drawable.contacts normal) 
tab.position 1 -» tab.setIcon(R.drawable.message normal) 
else -> tab.setlIcon(R.drawable.space normal) 


) 
override fun onTabReselected(tab: TabLayout.Tab) ( 


when { 
tab.position === 0 -> tab.setIcon(R.drawable.contacts focus) 
tab.position === 1 -> tab.setlIcon(R.drawable.message focus) 


else -> tab.setIcon(R.drawable.spacs focus) 


}) 


消息 联系 人 动态 


) 
效果 如 图 15-31 所 示 。 图 15-31 
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在 TabItem 中 既 有 图 像 也 有 文字 , 我 们 除了 按 前 面 的 常规 方式 显示 它们 之 外 , 还 有 一 种 看 


起 来 很 牛 的 方式 。 这 种 方式 可 以 混合 文字 与 图 像 , 还 可 
以 混合 各 种 字体 与 颜色 ， 并 能 把 它们 作为 控件 的 Text 
型 属性 的 值 ( 见 图 15-32) 。 


#102 楼 2016-09-07 17:00 蓝 色 三 叶 草 @ 


图 15-32 


如 何 显示 出 图 15-32 这 种 效果 呢 ? 可 能 会 想到 使 用 一 个 横向 的 LinearLayout， 然 后 加 入 多 
个 TextView, 为 它们 设置 不 同 的 字体 、 颜 色 , 最 后 用 ImageView 显示 小 图 标 。 这 样 做 没 问 题 ， 
但 是 能 把 这 一 堆 控件 的 组 合 赋 给 一 个 TextView 的 text 属性 吗 ? 当然 不 能 ! 利 用 SpannableString 


就 可 以 了 ! 


SpannableString 也 是 一 个 字符 串 类 ， 所 以 可 以 把 它 设置 到 控件 的 “text” 属 性 中 。 与 普通 
String 类 的 区 别 是 ， 它 可 以 包含 文本 、 图 片 ， 可 以 为 文本 中 一 段 文字 的 多 个 小 片段 设置 不 同 的 


颜色 、 字 体 等 ， 每 一 个 片段 叫 作 一 个 span。 


SpannableString 的 主要 使 用 方式 是 : 先 为 SpannableString 设置 一 段 文 本 , 再 创建 某 种 类 型 
的 Span， 再 把 Span 设置 给 SpannableString， 设 置 时 要 指定 这 个 Span 从 第 几 个 字符 作用 到 第 


几 个 字符 ， 还 要 指定 对 前 后 字符 的 影响 。 以 下 为 示例 : 
//Él&—f Spannablestring XHK 


val msp = SpannableString (" 当 我 显示 出 来 后 ， 你 会 发 现 我 是 一 段 有 个 性 的 文字 ") 


// EBUEIR, RO, 1 PANTIES monospace 


msp.setSpan(TypefaceSpan("monospace"), 0, 2, 


Spanned.SPAN EXCLUSIVE EXCLUSIVE) 
// BET IE, 3 2. 3 BENFA 


msp.setSpan(TypefaceSpan("serif"), 2, 4, Spanned.SPAN EXCLUSIVE EXCLUSIVE) 
/LLBUFIEXAN GEI, Er. RE), Ba. 5 BASERNOV 20 RE 
msp.setSpan(AbsoluteSizeSpan(20), 4, 6, Spanned.SPAN EXCLUSIVE EXCLUSIVE) 


/LLBEBEÉSAUNIPTERT CEP ETE 


我 们 下 面 就 为 TabItem 创建 文本 与 图 像 混合 的 标题 字符 串 。 先 封装 一 个 方法 ， 代 码 如 下 : 
V/F title PPR II E iconResid Hi HANAR 


fun makeTabItemTitle(title: String, iconResId: Int): CharSequence { 
val image = resources.getDrawable (iconResId, null) 


image.setBounds(0, 0, 40, 40) 
//Replace blank spaces with image icon 
val sb = SpannableString(" \n$title") 


val imageSpan - ImageSpan(image, ImageSpan.ALIGN BASELINE) 
Sb.setSpan(imageSpan, 0, 1, Spanned.SPAN EXCLUSIVE EXCLUSIVE) 


return sb 


} 


这 个 方法 有 两 个 参数 : 一 个 是 文本 ; 另 一 个 是 文本 上 面 的 图 像 。 方 法 中 首先 从 资源 创建 了 
图 像 image， 然 后 调用 setBounds() 方 法 设置 了 图 像 绘制 到 的 区 域 范围 。 


247 


Android 10 Kotlin 编程 通俗 演义 


图 像 画 到 哪里 呢 ? 画 到 画布 (Canvas) 上 。 Sk $ X76? 就 是 Span 的 大 小 。Span 多 大 呢 ? 是 
由 图 像 的 Bounds 决定 的 。 这 并 不 矛盾 ， 只 要 记 住 Span 的 左上 角 是 画布 的 (0.0) 坐 标 即 可 ， 所 以 
我 们 要 限制 图 像 宽 高 不 超过 40 像素 ， 就 设置 Bounds， 图 像 会 按 比 例 缩放 之 后 画 上 去 。 


再 看 这 段 代 码 ， 在 创建 SpannableString 的 实例 sb 时 ， 在 字符 串 前 面 增加 了 一 个 空格 和 一 
个 换行 符 。 空 格 是 图 像 span 的 占 位 符 ， 后 面 在 设置 Span 时 会 用 图 像 蔡 换 它 。 我 们 又 创建 了 一 
幅 图 像 span imageSpan, 创建 时 传 入 了 前 面 的 image 并 指定 了 它 与 左右 的 文本 如 何在 纵向 上 对 
齐 。 由 于 最 终 图 像 和 文本 处 于 不 同 的 行 ， 实 际 此 参数 并 不 起 作用 。 最 后 将 图 像 Span 设置 给 sb; 
注意 指定 作用 到 的 位 置 是 从 第 0 位 开始 的 1 个 字符 ， 正 好 指向 最 前 面 的 空格 ， 所 以 才能 替换 空 
格 ,最 后 一 个 参数 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE( 独 占 ) 表 示 效 果 不 影 响 前 后 字符 。 
因为 要 在 ViewPageAdapter 的 方法 getPageTitle0 中 使 用 ， 所 以 我 们 就 把 这 个 方法 放 到 
ViewPageAdapter 中 。 再 把 getPageTitle() 稍 做 修改 ， 有 具体 如 下 : 
JL LEBHE  KHIISEL SSELEXES, MOH 
override fun getPageTitle(position: Int): CharSequence? ( 
when (position) ( 
0 -» return makeTabItemTitle("if/E",R.drawable.message normal) 
1 -» return makeTabItemTitle ("HEX A",R.drawable.contacts normal) 


2 -» return makeTabItemTitle("Z]d;",R.drawable.space normal) 
else -» return null 


) 


最 后 还 要 做 一 点 工作 ， 设 置 TabLayout 的 一 个 属性 。 不 设置 的 话 ， 图 像 显示 不 出 来 。 属 性 
名 叫 tabTextAppearance， 是 TabItem 标题 的 Style， 所 以 我 们 要 先 创 建 一 个 style 。 在 
res/values/styles.xml 中 增加 一 个 style: 
<style name="TabTitleAppearance" parent="TextAppearance.Design.Tab"> 
<item name="textAllCaps">false</item> 
<item name="android:textAllCaps">false</item> 
<!-- IERGBTIBIE EXUS, INS, BHMZARBÉH! --> 
</style> 


然后 设置 给 TabLayout 的 tabTextAppearance 属性 〈 见 图 15-33) 。 


tabMaxWidth 


tabTextAppearance TabTitleAppearance 


15-33 


现在 可 以 运行 App 看 看 效果 了 ( 见 图 15-340 。 注 意 ， 要 将 所 有 设置 TabItem 图 标的 代码 
屏蔽 掉 ! 
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效果 不 错 , 但 是 选中 一 个 Tab 时 , 图 标 没有 变化 ， 
这 就 需要 响应 Tab 选择 事件 ， 设 置 图 像 Span， 我 们 就 
不 做 了 ， 因 为 这 里 的 主要 目的 是 演示 SpannableString Cl E 
的 用 法 。 下 面 是 MainFragment 类 的 全 部 代码 : 


private const val ARG PARAMI 
private const val ARG PARAM2 


class MainFragment : Fragment() { 
// BI — HEEL, E TS LAXIS 


private val listViews - arrayOfNulls«RecyclerView?» (3) 


override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 


//&f& —f RecyclerView, ZB oo ELI. oo IA. 00 ZIJA 


listViews [0]-RecyclerView(context!!); 
listViews[1]-RecyclerView(context!!); 

listViews [2]-RecyclerView(context!!); 

LUST WR, RT EEBIRURS INRIBURUAPERIBER E 
listViews[0]!!'.setBackgroundColor (Color.RED); 
listViews[1]!!'.setBackgroundColor (Color.GREEN); 
listViews[2]!'.setBackgroundColor (Color.BLUE); 


override fun onCreateView( 
inflater: LayoutInflater, container: ViewGroup?, 
savedInstanceState: Bundle? 

): View? ( 
// Inflate the layout for this fragment 


return inflater.inflate(R.layout.fragment main, container, false) 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) ( 

super.onViewCreated(view, savedInstanceState) 
//& Adapter HES viewPager Aø 
viewPager.adapter = ViewPageAdapter() 
tabLayout.setupWithViewPager (viewPager); 
// TEE. Tabrtem BJA FRE 

Pid tabLayout.getTabAt(0)?.setIcon(R.drawable.message focus) 

Pi d tabLayout.getTabAt(1)?.setIcon(R.drawable.contacts normal) 

y tabLayout.getTabAt(2)?.setIcon(R.drawable.space normal) 

yy tabLayout.addOnTabSelectedListener(object : 

TabLayout.OnTabSelectedListener { 
yy override fun onTabSelected(tab: TabLayout.Tab) ( 
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when { 
tab.position 
tab.position 


else -> tab. 


=== 0 -> tab.setIcon(R.drawable.contacts focus) 
=== 1 -> tab.setlIcon(R.drawable.message focus) 
setIcon(R.drawable.spacs focus) 


override fun onTabUnselected(tab: TabLayout.Tab) ( 


} 


when { 
tab.position 
tab.position 


else -> tab. 


=== 0 -> tab.setlIcon(R.drawable.contacts normal) 


=== 1 -> tab.setIcon(R.drawable.message normal) 
setlIcon(R.drawable.space normal) 


override fun onTabReselected(tab: TabLayout.Tab) ( 


» 


// Jy ViewPager JE — PEMEX 


when ( 
tab.position 
tab.position 


else -> tab. 


=== 0 -> tab.setIcon(R.drawable.contacts focus) 
=== 1 -> tab.setIcon(R.drawable.message focus) 
setlIcon(R.drawable.spacs focus) 


internal inner class ViewPageAdapter : PagerAdapter() { 


override fun getCount(): 


Int ( 


return listViews.size 


LR EBIRR -RRE SEGETES, Mo HFH 


override fun getPageTitle(position: Int): CharSequence? { 


-» return makeTabItemTitle ("i",R.drawable.message normal) 
-> return makeTabItemTitle ("ERA ", R.drawable.contacts normal) 


-> return makeTabItemTitle("3]ds",R.drawable.space normal) 


when (position) ( 
0 
1 
2 
else -» return null 


override fun isViewFromObject(view: View, obj: Any): Boolean ( 
return view == obj 


// SiIfL —fT view, container ET view Z8, BE ViewPager, 
//position ZSM, M o FiF 


override fun instantiateItem (container: ViewGroup, position: Int): Any { 


val v = listViews[position] 
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LLLA ERA 
container.addView (v) 


return v!! 


override fun destroyItem(container: ViewGroup, position: Int, obj: Any) ( 
container.removeView(obj as View) 


) 


//I83 title TU T RPB UT EiconResrd BEFZI/BIOETIÉR 

fun makeTabItemTitle(title: String, iconResId: Int): CharSequence { 
val image - resources.getDrawable (iconResId, null) 
image.setBounds(0, 0, 40, 40) 
//Replace blank spaces with image icon 
val sb = SpannableString(" \n$title") 
val imageSpan - ImageSpan(image, ImageSpan.ALIGN BASELINE) 
Sb.setSpan(imageSpan, 0, 1, Spanned.SPAN EXCLUSIVE EXCLUSIVE) 
return sb 


) 
在 QQ App 中 ,只 能 通过 TabItem 来 翻 页 ,不 能 通过 滑动 翻 页 ,所 以 我 们 应 该 禁用 ViewPager 
的 这 项 能 力 。 


15.3.7 jb ViewPager 滑动 翻 页 


ViewPager 中 并 没有 一 个 属性 或 方法 可 以 很 容易 地 把 滑动 翻 页 功能 去 掉 。 大 家 公认 的 唯一 
方法 是 派生 一 个 类 ， 重 写 两 个 方法 ， 那 我 们 也 这 样 做 吧 。 

新 建 一 个 类 QQViewPager， 代 码 如 下 : 

1 BARRE — INESSE Z 


class QQViewPager : ViewPager { 
constructor(ctx: Context) : super(ctx) ( 


) 
11 BRER IIE E, BRIEF AE PT EIE RET 


constructor (context: Context, attrs: AttributeSet) 
super (context, attrs) { 


override fun onTouchEvent (event: MotionEvent): Boolean { 
return false 
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override fun onInterceptTouchEvent (event: MotionEvent): Boolean { 
return false 
) 
) 
主要 重 写 了 方法 onTouchEvent0 和 onInterceptTouchEventO。 其 实现 更 简单 ,直接 返回 false, 
表示 此 事件 没有 被 当前 控件 处 理 ， 继 续 往 父 控件 传 。 
别 忘 了 修改 layout 文件 ， 将 ViewPager 改 为 QQViewPager (fragment main.xml 中) : 
a-EWEX--» 
Xcom.example.niu.qqapp.QQViewPager 
android:id-"G(id/viewPager" 
android:layout width-"match parent" 
android:layout height-"Odp" 
android:layout weight-"1" /> 


再 运行 ， 是 不 是 左右 滑动 不 能 翻 页 了 ? 
15.3.8 创建 “消息 ”页 


QQ App 的 消息 页 面 如 图 15-35 所 示 。 

先 分 析 一 下 Layout 结构 。 在 主 内 容 区 ， 最 上 面 是 一 个 搜 
索 框 ， 下 面 是 列表 的 各 行 。 实 际 上 ， 这 个 搜索 行 也 是 列表 的 一 
行 。 这 个 RecyclerView 大 部 分 行 的 Layout 都 是 一 样 的 : 左边 
一 幅 图 像 , 右边 分 两 行 , 上面 是 标题 与 时 间 , 下 面 是 详细 信息 。 
唯 独 顶 端 这 一 行 的 Layout 不 一 样 ， 只 有 一 个 搜索 框 。 回 忆 一 
下 RecyclerView 的 用 法 ， 应 利用 Adapter 为 它 提供 Item 的 数 
据 和 显示 Item 数据 的 控件 。 我 们 需要 准备 存放 数据 的 类 并 创 
建行 控件 的 Layout 资 源 。 先 为 这 两 种 不 同 的 行 创建 两 个 Layout 
资源 文件 。 


1. 创建 搜索 行 Layout 


首先 创建 顶端 行 的 Layout。 顶端 行 只 有 一 个 搜索 控件 , 但 是 不 能 使 用 Android 提供 的 搜索 
控件 SearchView， 因 为 SearchView 的 搜索 图 标 显示 在 左边 ， 而 QQ 这 个 搜索 控件 的 图 标 显示 
在 中 间 ， 并 且 旁 边 还 伴 有 文字 ， 如 图 15-36 所 示 。 


15-36 


当 在 QQ App 中 单 击 这 个 图 标 时 , 会 打开 一 个 新 的 页 面 。 在 新 页 面 中 用 户 才 可 以 真正 地 进 
行 搜索 ， 所 以 此 处 的 搜索 控件 就 是 摆设 ， 我 们 可 以 用 多 个 控件 模拟 出 来 。 

为 这 一 行 创建 Layout 资源 ， 文 件 名 为 res/layout/message list item search.xml 。 其 内 容 是 
这 样 的 : 
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<?xml version-"1.0" encoding="utf-8"?> 
<androidx.cardview.widget.CardView 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:id-"Grid/searchViewStub" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:layout marginBottom-"4dp" 
android:layout marginEnd-"8dp" 
android:layout marginStart-"8dp" 
dp" 
app:cardBackgroundColor-"?attr/colorControlHighlight" 


android:layout marginTop- 
app:cardCornerRadius-"2dp"^ 


*LinearLayout 
android:layout width-"wrap content" 
android:layout height-"match parent" 
android:layout gravity-"center horizontal" 
android:gravity-"center vertical" 
android:orientation-"horizontal"^ 


«ImageView 
android:layout width-"30dp" 
android:layout height-"30dp" 
android:layout weight-"1" 
app:srcCompat-"8android:drawable/ ic menu search"/» 


«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout weight-"1" 
android:text-"i$ t" 
android:textSize-"18sp" /» 
«/LinearLayout^» 
X/androidx.cardview.widget.CardView^ 


最 外 面 是 一 个 CardView， 使 用 它 的 主要 原因 是 方便 产生 圆 角 效果 。 它 里 面 要 显示 一 幅 图 
像 和 一 个 文本 ， 所 以 使 用 了 一 个 横向 的 LinearLayout 来 包含 这 两 个 控件 。LinearLayout 的 宽 由 
内 容 决 定 ， 并 且 它 的 layout gravity 属性 为 横向 居中 ， 这 样 LinearLayout 中 的 控件 才能 看 起 来 
居中 。 要 让 文本 在 纵向 上 居中 ， 还 需要 设置 LinearLayout 的 gravity 值 为 纵向 居中 。 

可 以 看 到 layout_gravity 与 gravity 的 区 别 ,前 者 是 设置 控件 本 身 在 其 父 控件 中 的 对 齐 方 式 ， 
后 者 设置 子 控件 的 对 齐 方 式 。 


2. 创建 其 余 行 的 Layout 
非 搜索 行 的 Layout 资源 文件 为 res/layout/message list_item.xml， 内 容 是 这 样 的 : 
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<?xml version-"1.0" encoding="utf-8"?> 

<LinearLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 


android:layout width-"match parent" 


android:layout height- 
android:background-"6drawable/lis t item bk selector" 
android:paddingBottom-"A4dp" 

android:paddingEnd-"8dp" 

android:paddingStart-"8dp" 

android:paddingTop-"A4dp"^ 


"wrap content" 


«androidx.cardview.widget.CardView 
android:layout width-"48dp" 
android:layout height-"48dp" 
app:cardCornerRadius-"25dp" 
app:cardElevation-"2dp"^ 


«ImageView 
android: id-"Q(id/imageView" 
android:layout width-"match parent" 
android:layout height-"match parent" 
app:srcCompat-"8drawable/message normal"/» 
«/androidx.cardview.widget.CardView^ 


«androidx.constraintlayout.widget.ConstraintLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:layout weight-"1"^ 


«TextView 
android:id-"G(id/textViewTitle" 
android:layout height-"wrap content" 
android:text=" 标 题 " 
android:textSize-"18sp" 
android:textStyle-"bold" 
app:layout constraintTop toTopOf-"parent" 
android:layout width-"0dp" 
android:layout marginStart-"8dp" 
app:layout constraintStart toStartOf-"parent" 
android:layout marginEnd-"8dp" 
app:layout constraintEnd toStartOf-"Q(id/textViewTime"/^ 


<TextView 
android:id="@+id/textViewTime" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginRight-"8dp" 
android:layout marginTop-"4dp" 


254 


Æ 模仿 QQ App 界面 


android: text=" 时 间 " 
android:textColor-"?attr/colorControlNormal" 
android:textSize-"12sp" 

app:layout constraintRight toRightOf-"parent" 
app:layout constraintTop toTopOf-"parent"/» 


«TextView 
android:id-"Gid/textViewDetial" 
android:layout width: dp" 
android:layout height-"wrap content" 
android:layout marginBottom-"8dp" 
android:text=" 详 细 描述 " 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintEnd toStartOf-" Q*id/cardViewBadge" 
android:layout marginEnd-"8dp" 
app:layout constraintStart toStartOf-"parent" 
android:layout marginStart-"8dp" 
app:layout constraintTop toBottomOf-" G*id/textViewTitle" 
android:layout marginTop-"4dp"/» 


«androidx.cardview.widget.CardView 
android: id="@+id/cardViewBadge" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginBottom-"8dp" 
android:layout marginRight-"8dp" 
app:cardBackgroundColor-"68color/colorAccent" 
app:cardCornerRadius-"8dp" 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintRight toRightOf-"parent"^ 


«TextView 

android:id-"Q(4id/textViewBadge" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginEnd-"4dp" 
android:layout marginStart-"4dp" 
android:text-"0" 
android:textColor-"8(android:color/white" 
android:textStyle-"bold"/» 

«/androidx.cardview.widget.CardView^ 

«/androidx.constraintlayout.widget.ConstraintLayout^ 


«/LinearLayout^ 


注意 各 控件 的 IDP。 其 预览 图 如 图 15-37 所 示 。 

整个 行 是 一 个 横向 的 LinearLayout， 其 左边 是 一 个 
CardView ， 内 会 一 个 ImageView ; 右边 是 一 个 
ConstraintLayout。 之 所 以 在 ImageView 外 包 一 个 CardView， 15:37 
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主要 是 利用 了 CardView 的 圆 角 效果 ， 设 计 出 圆 形 InageView。 标 题 、 时 间 、 详 细 描述 、 小 徽 
章 都 在 ConstraintLayout 中 。 小 徽章 是 由 CardView 和 TextView 共同 组 成 的 ，TextView 包 在 
CardView 中 ， 使 用 CardView 的 原因 也 是 利用 它 变 圆 的 功能 。 行 底 的 线 是 利用 selector 作为 背 
景 设计 出 来 的 ， 这 个 selector 是 在 list item bk selector.xml 文件 中 定义 的 ， 其 内 容 为 : 


<?xml version-"1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state activated="false" android: drawable="@drawable/ 
list item bk" /> 
</selector> 


list item bk.xml 的 内 容 为 : 


«?xml version-"1.0" encoding="utf-8"?> 
*layer-list xmlns:android-"http://schemas.android.com/apk/res/android" > 
<item android:top-"54dp"^ 
<shape android:shape-"line" > 
«stroke 
android:width-"1px" 
android:color-"&FFa0a0a0" /> 
«!--«solid android:color-"£$FFFFFFFF" />--> 
«padding 
android:bottom-"0dp" 
android:left-"2dp" 
android:right-"2dp" 
android:top-"Odp" /> 
«/shape» 
</item> 
</layer-list> 


3. 显示 消息 列表 
消息 列表 RecyclerView 对 应 的 是 listViews[0]， 让 它 显 示 内 容 只 需 三 步 : 


(1) 为 它 创建 Adapter 类 。 
(2) 创建 Adapter 对 象 并 设置 给 它 。 
(3) 为 它 设置 Layout 管理 器 。 


首先 为 它 创建 Adapter 类 , 类 名 为 MessagePageListAdapter. 注意 , 我 们 之 前 创建 的 Adapter 
类 一 般 会 作为 内 部 类 ， 但 是 这 次 由 于 三 个 RecyclerView 


了 E java 
需要 三 个 Adapter 类 ， 都 成 为 一 个 类 的 内 部 类 会 使 代码 v Ea com.example.niu.qqapp 
太 乱 ， 所 以 把 三 个 Adapter 类 全 创建 成 外 部 类 ， 并 且 放 Y Daadopter dmm 
p -—  ContactsPageListAdapter 
到 同一 个 包 下 ， 如 图 15-38 所 示 。 f MessagePageListAdapter 
MessagePageListAdapter 类 的 源码 如 下 : & SpacePagelListAdapter 
15-38 
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class MessagePageListAdapter(): 
RecyclerView.Adapter«MessagePageListAdapter.MyViewHolder»() ( 


override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): 
MyViewHolder ( 
val activity = parent.context as Activity 
val inflater - activity.layoutInflater 
var view: View? = null 
if (viewType --- R.layout.message list item search) ( 
view = inflater.inflate(R.layout.message list item search, parent, 
false) 
) else { 
view = inflater.inflate(R.layout.message list item, parent, false) 


return MyViewHolder (view!!) 


override fun getItemCount(): Int ( 
return 10 


override fun onBindViewHolder(holder: MyViewHolder, position: Int) { 


) 


override fun getItemViewType (position: Int): Int { 
if(0--position)( 
ILRTOBIDR fr TES 


return R.layout.message list item search; 
i 
VIRRA IT AAE IERIE 


return R.layout.message list_item; 


//4& ViewHolder #HA Adapter HKRX, KEI EATE 
inner class MyViewHolder (itemView: View) : 
RecyclerView.ViewHolder (itemView) 
F 


相 比 前 面 的 例子 , 这 个 Adapter 多 了 一 个 方法 getltemViewType(  RecyclerView 调用 它 获 
取 每 一 行 对 应 的 类 型 ， 类 型 实际 上 就 是 行 的 Layout 资源 ， 其 参数 是 行 的 序号 ， 除 了 第 0 行 ， 
其 余 各 行 的 Layout 都 一 样 。 直 接 返 回 了 Layout 资源 的 id。 此 方法 告诉 RecyclerView 有 不 同 的 
行 Layout， 于 是 在 创建 行 View 的 时 候 ， 就 需要 用 不 同 的 Layout 来 创建 。 此 时 ， 在 
onCreateViewHolder0 中 可 以 利用 第 二 个 参数 viewType， 根 据 viewType 加 载 不 同 的 Layout 资 
源 ， 因 为 viewType 就 是 Layout 资源 id。 

接着 为 RecyclerView 设置 Adapter 和 LayoutManager: 
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override fun onCreate(savedInstanceState: Bundle?) { 
super.onCreate (savedInstanceState) 
//Él& —f RecyclerView, FAXE oo LEUR. 00 BORA, oo ZIA 
listViews[0]-RecyclerView (context!!); 
listViews[l1]-RecyclerView (context!!); 
listViews[2]-RecyclerView (context!!); 


// Jf —f RecyclerView HE 
listViews[0]!!'.adapter = MessagePageListAdapter() 
listViews[0]!!'.layoutManager = LinearLayoutManager(context) 


) 
由 于 方法 onBindViewHolder0 没 有 实现 ， 因 此 除了 最 顶 行 ， 其 


余 每 一 行 显示 的 内 容 都 一 样 。 运 行 效果 如 图 15-39 所 示 。 D 
1539 ”显示 气泡 菜单 
在 消息 页 中 , 单 击 “+” 图 标 时 ， 显 示 出 菜单 ( 见 图 15-40) 。 o 

在 显示 这 个 气泡 沫 单 时 ， 整 个 页 面 变量 了 ， 这 叫 蒙 板 效果 。 * 

1、 蒙 板 效果 

9 


蒙 板 一 般 是 在 界面 上 盖 了 一 个 半 透 明 的 View， 当 然 也 可 以 用 
Activity 或 Dialog 来 作为 蒙 板 。 我 们 选择 使 用 View， 主 要 还 是 因 
为 使 用 View 简单 一 些 。 不同 于 Activity 和 Dialog, 让 View 作为 蒙 
板 是 有 条 件 的 , 即 必 须 保 证 这 个 View 在 最 上 层 。 最 后 添加 的 View 
肯定 在 最 上 层 ， 当 然 也 可 以 设置 View 的 z 属性 强制 使 一 个 View 
位 于 上 层 〈x,y,z 表示 三 维 空间 中 的 坐标 ， 一 般 我 们 只 关注 二 维 空 
间 ， 所 以 只 使 用 x 和 y， 而 z 则 用 于 表示 位 于 上 层 还 是 下 层 ) 。 

要 蒙 住 整个 屏幕 ， 就 要 保证 作为 蒙 板 的 View 的 大 小 是 充满 整 
个 屏幕 的 ， 所 以 必须 把 这 个 View 放 到 一 个 充满 了 屏幕 的 容器 控件 
中 。“ 消 息 ”“ 联 系 人 ”“ 动 态 ” 这 三 个 Tab 页 面 都 是 
RecyclerView, 并 没有 充满 整个 屏幕 , 也 无 法 把 蒙 板 View 加 进去 。 
将 蒙 板 View 作为 MainFragment 的 根 View 的 子 控件 最 合适 。 

MainFragment 的 根 View 肯定 是 充满 整个 屏幕 的 , 但 是 它 现在 
是 一 个 LinearLayout。LinearLayout 是 帮助 我 们 维持 导航 栏 和 内 容 
的 上 下 结构 的 ， 所 以 我 们 需 在 它 外 面 再 包 一 个 FrameLayout。 
FrameLayout 是 充满 整个 屏幕 的 ， 里 面 的 所 有 子 控件 都 可 以 设置 为 15-40 
充满 屏幕 。 

我 们 将 作为 蒙 板 的 控件 设置 为 FrameLayonut 的 子 控件 ,与 LinearLayout 同 级 ,就 可 以 盖 住 
LinearLayout 所 代表 的 内 容 了 。 于 是 ，fragment_ main.xml 的 内 容 变 成 这 样 : 

«FrameLayout xmlns:android-"http://schemas.android.com/apk/res/android" 

xmlns:tools-"http://schemas.android.com/tools" 


7 oc» wmm 
AASAD 
(y e D oem 


o H 
COX5. [MN] e anae 


Qoia e 
[CERA 


atow © #7 
XGaon, ful eM wy 
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xmlns:app-"http://schemas.android.com/apk/res-auto" 
tools:context-".MainFragment" 

android:layout width-"match parent" 

android:layout height-"match Parent"> 


XLinearLayout android:layout width-"match parent" 
android:layout height-"match parent" 
android:orientation-"vertical"^ 

«1-—— Soft 
*LinearLayout 


«/LinearLayout^» 


</FrameLayout> hA Ei 


个 FrameLayout。 下 面 我 们 响应 图 15-41 所 示 的 “+” 
号 显示 蒙 板 。 15-41 
首先 为 它 设置 一 个 有 意义 的 id (“textViewPopMenu”) ,再 设置 Click 事件 的 侦 听 器 (在 
Fragment::onViewCreated0 中 ) : 
textViewPopMenu.setOnClickListener ( 
// Hl Fragment Z4 (FrameLayout) 办 加 入 一 个 View fEZy LEUSAIERISEÉE 
val maskView - View(context) 


maskView.setBackgroundColor (Color.DKGRAY) 
maskView.alpha = 0.5f 


val rootView = view as FrameLayout 
rootView.addView( 
maskView, 
FrameLayout.LayoutParams.MATCH PARENT, 
FrameLayout.LayoutParams.MATCH PARENT 


) 
maskView.setOnClickListener ( rootView.removeView(maskView) ) 


) 


在 响应 代码 中 ， 首 先 创建 蒙 板 View， 保 存在 变量 maskView 中 ， 设 置 蒙 板 的 颜色 为 深 灰 
色 ， 设 置 蒙 板 为 半 透 明 ， 将 蒙 板 View 加 入 根 View (FrameLayout) 中 。 注 意 addView0 这 个 方 
法 ， 它 有 很 多 重 载 的 方法 ， 我 们 使 用 的 这 个 传 了 三 个 参数 ， 第 一 个 是 要 添加 的 View， 第 二 个 
和 第 三 个 是 在 父 View 中 的 排版 参数 。 

我 们 还 响应 了 蒙 板 View 的 单 击 事件 ， 在 其 中 把 蒙 板 View 删除 。 现 在 运行 App， 在 消息 
页 面 单 击 导航 栏 上 的 “+”， 是 不 是 蒙 上 了 ? 在 界面 上 单 击 一 下 ， 蒙 板 是 不 是 消失 了 ? 


2. 弹出 式 窗口 
蒙 板 有 了 ， 下 一 步 显示 气泡 式 菜单 。 这 个 气泡 菜单 肯定 不 是 真 的 Menu， 而 是 用 其 他 控件 
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模拟 出 来 的 。 用 什么 控件 呢 ? 菜单 项 可 以 用 纵向 的 LinearLayout 或 ListView 模拟 ， 但 是 这 个 
气泡 怎么 办 ? 还 有 ， 我 们 希望 能 根据 所 单 击 的 控件 位 置 摆 放 菜单 的 位 置 。 如 果 使 用 View 去 模 
拟 弹 出 菜单 ， 过 程 会 相当 麻烦 ,最 好 能 找到 接近 我 们 要 求 的 现成 控件 。 PopupWindow (翻译 为 
弹出 式 窗口 ) 即 可 ! 注意 ， 它 不 是 View， 而 是 一 个 Window. 
实际 上 真正 能 承载 各 View， 把 它们 显示 出 来 ， 并 让 它们 能 响应 事件 的 是 Window， 而 不 
是 Activity。 没 有 Window, Activity 什么 都 不 是 ，Activity 只 是 管理 属于 一 个 页 面 的 控件 ， 并 
不 能 承载 控件 。 不 是 特殊 情况 ， 我 们 不 应 该 动用 Window。 
PopupWindow 具有 像 菜单 一 样 的 行为 ， 因 为 可 以 在 显示 PopupWindow 时 指定 一 个 View 
作为 锚 。PopupWindow 可 以 以 这 个 锚 的 位 置 为 参考 来 摆 放 自己 的 位 置 。 
下 面 ， 我 们 首先 实现 在 单 击 “+” 时 显示 出 PopupWindow， 再 一 步 步 改进 。 
修改 “+” 的 单 击 事件 响应 方法 ， 具 体 如 下 : 
textViewPopMenu.setOnClickListener { 
// A] Fragment £X (FrameLayout) 办 加 入 一 个 View fEZS EEUISAE RISE 
val maskView = View(context) 


maskView.setBackgroundColor (Color.DKGRAY) 
maskView.alpha = 0.5f 


val rootView = view as FrameLayout 
rootView.addView( 
maskView, 
FrameLayout.LayoutParams.MATCH PARENT, 
FrameLayout.LayoutParams.MATCH PARENT 
) 


maskView.setOnClickListener ( rootView.removeView(maskView) } 


// lit PopupWindow, AFAR TRA 
val pop = PopupWindow (activity) 
/为 入 万 证 加 一 个 大任 
pop.contentView = View(activity) 
// AER OAD 
pop.width = 400 
pop.height = 600 
// BRAO 
pop.showAsDropDown (it) 

) 


首先 创建 PopupWindow 对 象 , 然后 为 它 设置 内 容 Views 
这 个 不 设置 是 不 行 的 , 如 果 一 个 窗口 没有 内 容 , 那么 它 是 不 
会 显示 出 来 的 。 后 面 又 设置 了 这 个 窗口 的 宽 和 高 ,如 果 不 设 
置 ， 它 也 不 能 显示 。 最 后 ， 在 显示 窗口 时 ， 传 入 了 作为 锚 的 
View, 就 是 系统 在 调用 onClickO 时 为 我 们 传 入 的 参数 (it) ， 
它 就 是 发 出 Click ( 单 击 ) 事件 的 控件 ， 即 “+” 控 件 。 这 样 
一 来 ， 窗 口 就 显示 在 “+” 图 标的 下 方 了 〈 见 图 15-42) 。 图 15-42 
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还 有 很 多 问题 ， 我 们 一 个 个 解决 。 

首先 是 当 单 击 蒙 板 时 窗口 也 应 该 跟着 消失 才 对 。 这 个 问题 简单 , 在 响应 蒙 板 单 击 的 方法 中 
增加 代码 。 但 是 在 此 之 前 ,我们 需要 先 把 弹出 窗口 变量 变 成 类 的 字段 ， 因 为 它 要 在 不 止 一 个 方 
法 里 使 用 。 但 是 ， 应 作为 哪个 类 的 字段 呢 ? 当然 可 以 直接 放 在 MainFragment 中 ， 但 是 根据 够 
用 就 行 的 原则 《〈 不 要 过 度 设 计 ) ， 这 个 变量 其 实 只 在 响应 “+” 的 侦 听 器 类 的 范围 内 使 用 ， 所 
以 作为 这 类 的 成 员 变量 比较 好 。 修 改 后 的 代码 如 下 : 

textViewPopMenu.setOnClickListener ( 


//€l& PopupWindow, AFAR TURA 
val pop - PopupWindow (activity) 


// fF] Fragment Z$ (FrameLayout) 办 加 入 一 个 View FH EEISIERISE 
val maskView = View(context) 

maskView.setBackgroundColor (Color.DKGRAY) 

maskView.alpha = 0.5f 


val rootView = view as FrameLayout 
rootView.addView( 
maskView, 
FrameLayout.LayoutParams.MATCH PARENT, 
FrameLayout.LayoutParams.MATCH PARENT 
) 
maskView.setOnClickListener ( 
/ILFERSR 
rootView.removeView (maskView) 
// BBICRH HI BT ET 
pop.dismiss(); 
) 


/ LB UTR TI — IEEE 
pop.contentView - View(activity) 
//LLRUBEBIEIBEAAN 
pop.width = 400 
pop.height - 600 
/LBESBTEI 
pop.showAsDropDown (it) 
) 


在 新 代码 中 ， 变 量 pop 的 定义 被 移动 到 最 顶部 ， 在 蒙 板 View 的 Click 响应 方法 中 隐藏 了 
pop， 于 是 在 蒙 板 消失 时 ， 弹 出 窗口 也 会 消失 。 为 什么 要 把 变量 pop 的 定义 移动 到 顶部 呢 ? 因 
为 在 原来 的 位 置 时 ， 蒙 板 View 的 Click 响应 方法 中 找 不 到 pop 变量 。 

下 一 步 ， 我 们 把 pop 设计 成 气泡 状 。 

3. 9-patch 图 像 


要 把 一 个 窗口 设 成 不 规则 形状 ,在 Android 里 还 是 比较 简单 的 。 其 实 我 们 把 一 个 气泡 状 的 
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图 片 作为 PopupWindow 的 背景 就 行 了 。 但 是 ， 对 这 个 图 片 有 一 定 的 要 求 ， 所 以 我 们 要 稍微 多 
加 点 处 理 , 因为 我 们 希望 这 个 图 片 能 适应 控件 不 同 尺寸 的 拉 伸 而 且 不 失真 。 可 以 利用 “9-patch” 
图 像 。 

9-patch 简称 为 “9P 图 ”。9P 图 就 是 一 张 普通 的 图 像 (是 栅 格 图 ， 不 是 矢量 图 ) ， 但 是 可 
以 做 到 拉 伸 不 失真 。 比 如 我 们 要 为 一 个 按钮 设 一 个 有 质感 的 背景 ， 小 的 话 如 图 15-43 所 示 , 看 
起 来 不 错 ， 没 有 失真 ， 但 是 变 大 〈 见 图 15-440. 就 不 行 了 ， 看 起 来 失真 了 。 我 们 希望 无 论 按钮 
很 大 还 是 很 小 都 不 失真 ， 如 图 15-45 所 示 。 


一 “一 -一 


图 15-43 图 15-44 图 15-45 


虽然 图 15-45 的 凸 起 看 没有 图 15-44 那么 高 , 但 是 也 保留 了 质感 , 同时 边界 没有 变 模糊 (要 
求 太 高 了 也 很 难 做 到 ， 达 到 这 种 效果 就 很 不 错 了 )。 要 达到 这 种 效果 ， 原 理 也 很 简单 ， 只 拉 伸 
不 会 模糊 的 部 分 即 可 。 上 面 3 个 图 中 不 会 变 模糊 的 部 分 很 明显 , 就 是 中 间 那 块 都 是 同一 种 颜色 
的 部 分 。 拉 伸 时 其 实 使 用 了 插值 算法 ,如果 一 个 插值 点 跟 左 右 的 点 是 同一 种 颜色 ,那么 横向 拉 
伸 时 ， 计 算出 的 这 个 插值 点 的 颜色 肯定 与 左右 相同 ， 在 纵向 上 也 一 样 。 也 就 是 说 ， 有 的 部 分 可 
以 横向 拉 伸 而 不 失真 ， 有 的 部 分 纵向 拉 伸 不 失真 ， 如 果 一 个 插值 点 的 上 、 下 、 左 、 右 都 是 同一 
颜色 ， 那 么 怎么 拉 伸 都 不 失真 。 

9P 图 能 告诉 Android 系统 这 个 图 片 中 哪些 部 分 可 以 拉 伸 、 哪 些 部 分 不 可 以 拉 伸 。9P 图 的 
原理 如 图 15-46 所 示 。 


15-46 


注意 ， 中 间 白 色 部 分 才 是 真正 的 图 片 ， 在 绘图 时 ， 至 少 要 在 上 、 下 、 左 、 右 留 出 一 个 像素 
的 空白 ,然后 用 纯 黑 色 在 左边 和 顶部 划 出 两 条 直线 (分 别 标 出 纵向 可 拉 伸 区 和 横向 可 拉 伸 区 )， 
最 终 的 可 拉 伸 区 就 是 两 个 区 域 的 交集 ， 即 中 间 的 虚线 框 。 同 时 ， 这 个 区 域 也 是 内 容 所 在 区 , 不 
可 拉 伸 的 区 域 就 是 Padding， 即 内 部 空白 。 这 一 切 都 是 Android 系统 自己 处 理 的 ， 只 要 把 一 个 
P 图 设置 给 一 个 控件 ， 那 么 这 个 控件 就 会 把 内 容 放 在 可 拉 伸 区 ， 非 拉 伸 区 自动 成 为 Padding。 

如 果 想 让 内 容 区 不 由 拉 伸 区 来 决定 , 而 是 自 定义 一 个 区 域 , 就 会 用 到 右边 和 下 边 两 条 黑 线 
( 见 图 15-47) 。 
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15-47 


做 9P 图 的 一 个 重点 是 至 少 在 四 周 留 出 1 个 像素 的 空白 ， 即 使 右边 和 下 边 不 想 画 黑 线 ， 也 
要 留 空白 。 

最 后 ， 如 何在 工程 中 保存 9P 图 呢 ? 在 文件 名 后 、 扩 展 名 前 加 上 op. Hin 
“abc.9p.jpg”“hhh.9p.png”。 


4. 创建 气泡 9P 图 


由 于 是 非 规则 图 像 ， 所 以 要 用 PNG 格式 ， 因 为 PNG 支持 像素 透明 。 不 论 什么 图 像 ， 实 
际 上 都 是 方 的 , 比如 要 显示 圆 角 ,就 要 把 不 显示 的 那些 像素 置 成 透明 ,也 就 是 说 像素 是 存在 的 ， 
但 设置 成 了 透明 。 

注意 ， 透 明 与 白色 不 是 一 回 事 。 我 们 知道 用 RGB 三 原色 可 以 混合 出 所 有 颜色 ， 于 是 在 计 
算 机 中 每 个 像素 都 是 由 RGB 三 部 分 组 成 ， 每 个 部 分 占 一 个 字 节 ， 这 三 部 分 使 用 不 同 的 值 就 会 
混合 出 不 同 的 颜色 。 但 是 ， 无 论 它们 是 什么 值 ， 都 混 不 出 透明 色 。 有 人 可 能 问 ， 这 三 部 分 都 是 
0 不行 吗 ? 不 行 , 都 是 0 的 话 是 纯 黑色 。 为 了 能 表示 透明 , 要 为 像素 增加 新 的 部 分 , BU Alpha, 
也 就 是 表示 透明 度 的 部 分 (术语 叫 通 道 ， 即 channel 。 于 是 ， 一 个 像素 就 由 ARGB 四 部 分 组 
成 ，A 的 值 越 小 越 透明 ， 越 大 越 不 透明 ， 为 0 时 全 透明 ， 为 最 大 时 〈255) 完全 不 透明 。 

15-48 是 笔者 仅 发 挥 了 千 分 之 一 的 艺术 细胞 所 创作 出 来 的 气泡 图 。 


15-48 
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注意 ， 红 箭头 所 指向 的 三 条 黑 线 指 定 了 可 拉 伸 区 《〈 其 实 不 是 仅 能 拉 伸 ， 还 可 以 缩小 ,所 以 
准确 地 说 应 是 缩放 区 ) 。 我 们 可 以 看 到 黑白 块 相 间 的 图 案 〈 表 示 画 布 ) 。 能 看 到 这 些 图 案 ， 说 
明 这 部 分 是 透明 的 。 最 右边 上 、 下 两 个 图 像 是 预览 效果 ， 上 面 的 是 拉 长 后 的 样子 ， 下 面 的 是 变 
宽 后 的 样子 。 现 在 可 以 把 这 个 图 像 设置 成 PopupWindow 的 背景 了 ， 代 码 如 下 : 


textViewPopMenu.setOnClickListener ( 


) 


//&l& PopupWindow, ATAR TAZA 
val pop - PopupWindow (activity) 


// I] Fragment £f (FrameLayout) PWA —f view fE EEUEAERUSE EE 
val maskView = View(context) 

maskView.setBackgroundColor (Color.DKGRAY) 

maskView.alpha = 0.5f 


val rootView = view as FrameLayout 
rootView.addView( 
maskView, 
FrameLayout.LayoutParams.MATCH PARENT, 
FrameLayout.LayoutParams.MATCH PARENT 
) 
maskView.setOnClickListener ( 
/ILFEBRSR 
rootView.removeView (maskView) 
/ LFBBEPEHI BT ET 
pop.dismiss(); 


) 


/ Ini TARR, DEN window BEER 

val drawable = resources.getDrawable (R.drawable.pop bk,null) 
// ERAUOSBEIBUS window HER 
pop.setBackgroundDrawable (drawable) 
/L2SBT TS NEE 

pop.contentView - View(activity) 
//LRBEBIEIBEAAN 

pop.width = 400 

pop.height - 600 

// BRO 

pop.showAsDropDown (it) 


运行 App， 效 果 如 图 15-49 所 示 。 有 点 效果 了 ， 下 面 把 菜 
单 内 容 显示 出 来 。 图 15-49 


5. 显示 菜单 内 容 


菜单 内 容 用 一 个 纵向 的 LinearLayout 来 承载 。 我 们 为 菜单 创建 一 个 Layout. 资源 
pop menu layout.xml， 内 容 如 下 : 
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<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:orientation-"vertical" 


android:layout width-"wrap content" 


android:layout height-"wrap content"> 
*XLinearLayout 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:gravity-"center vertical" 
android:layout marginBottom-"4dp"^ 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
android:layout marginEnd-"10dp" 
app:srcCompat-"G8mipmap/ ic launcher round"/» 
«TextView 


android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text=" 创 建 群 聊 " 
android:singleLine-"true"/» 
«/LinearLayout» 
*LinearLayout 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:gravity-"center vertical" 
android:layout marginBottom-"4dp"^ 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
android:layout marginEnd-"10dp" 
app:srcCompat-"Gmipmap/ic launcher round"/» 
«TextView 
android:layout width: rap content" 
android:layout height-"wrap content" 
android: text=" 加 好 友 / 群 " 
android:singleLine="true"/> 
</LinearLayout> 


<LinearLayout 


android:layout width-"wrap content" 


android:layout height-"wrap content" 
android:gravity-"center vertical" 


android:layout marginBottom-"4dp"^ 


«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
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android:layout marginEnd-"10dp" 
app:srcCompat-"Gmipmap/ic launcher round"/> 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text=" 扫 一 扫 " 
android:singleLine="true"/> 
</LinearLayout> 
<LinearLayout 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:gravity-"center vertical" 
android:layout marginBottom-"4dp"^ 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
android:layout marginEnd-"10dp" 
app:srcCompat-"Q8mipmap/ ic launcher round"/» 
«TextView 
android: id="@+id/textView6" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text=" 面 对 面 快 传 " 
android:singleLine-"true"/» 
«/LinearLayout» 
*LinearLayout 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:gravity-"center vertical"^ 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
android:layout marginEnd-"10dp" 
app:srcCompat-"6Gmipmap/ ic launcher round"/> 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android: text=" 付 款 " 


创建 群 聊 


加 好 友 / 群 


android:singleLine="true"/> aon 
«/Li > 
/LinearLayout 面对面 快 传 | 
</LinearLayout> 


付款 


其 预览 效果 如 图 15-50 所 示 。 
下 面 修改 创建 PopupWindow 的 代码 ， 把 它 的 内 容 设 为 这 个 Layout: 


/ LIC GERI, DIEI window MER 


val drawable = resources.getDrawable(R.drawable.pop bk,null) 


图 15-50 
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// EBERT window MAR 
pop.setBackgroundDrawable (drawable) 
/LIEURERUWEEIR, ÆA LinearLayout BÉ 
val menuView = LayoutInflater.from(activity). inflate(R.layout. 
pop menu layout, null) 


// BI window "ELE view 
pop.contentView = menuView 
LIBASBIEI Qu 
pop.showAsDropDown (it) © pod 
8-8 

执行 App， 效 果 如 图 15-51 所 示 。 S 
菜单 内 容 出 现 了 , 但 是 还 有 一 个 问题 : 弹出 窗口 太 靠 右 了 ， Q 

应 该 离开 一 点 距离 。 这 个 容易 ， 显 示 弹 出 窗口 时 使 用 另外 一 个 

重 载 方法 即 可 : "— 


void showAsDropDown(View anchor, int xoff, int yoff) 


此 方法 的 第 一 个 参数 与 原来 相同 ， 指 的 是 作为 锚 点 的 View， 第 二 个 参数 是 横 坐 标 上 的 偏 
移 ， 第 三 个 参数 是 纵 坐标 上 的 偏 移 。 如 果 想 让 它 向 左 或 向 上 偏 移 ， 需 要 对 xoff 和 yoff 传 入 负 
值 。 问 题 来 了 ， 对 xoff 给 个 什么 值 合适 呢 ? 当前 我 们 并 没有 给 予 这 个 值 ， 但 它 也 是 有 值 的 。 
为 了 让 Pop 窗口 的 右边 紧 靠 屏幕 的 右边 ，xoff 的 值 必须 为 “0-Pop 窗口 的 宽度 ”， 这 是 默认 的 
值 。 为 了 让 Pop 窗口 再 向 左 移 一 点 ， 我 们 需要 把 xoff 设置 为 “0-Pop 窗口 的 宽度 -n”，n 是 我 
们 估计 的 数 ， 比 如 10。 这 里 难以 确定 的 是 “Pop 窗口 的 宽度 ”， 因 为 在 显示 出 Pop 窗口 之 前 
我 们 无 法 得 到 Pop 窗口 正确 的 width 值 。Pop 窗口 的 大 小 是 由 内 容 决定 的 ， 如 果 我 们 可 以 计算 
出 其 内 容 View， 也 就 是 menuView 的 宽度 ， 就 可 以 确定 Pop 窗口 的 宽度 了 。 那 么 如 何在 View 
未 显示 之 前 计算 其 大 小 呢 ? 这 就 要 用 到 View 的 measure0 方 法 了 。 把 用 于 Pop 窗口 内 容 View 
的 设置 和 显示 的 代码 改动 如 下 : 

/ LIC TERR, DEI window MRR 

val drawable = resources.getDrawable (R.drawable.pop bk,null) 

// BIA GEEIE S window MER 

pop.setBackgroundDrawable (drawable) 

/ LIEGE, ZH LinearLayout RUMA 

val menuView - LayoutInflater.from(activity) 

.inflate(R.layout.pop menu layout, null) as LinearLayout 
// RE window PEZ fj view 
pop.contentView = menuView 


// 计 算 一 下 湛江 layout MERA D, BAERE 


menuView.measure (0, 0) 

JL BELT 

pop.showAsDropDown (it,-pop.contentView.measuredWidth-10,-10); 

注意 加 粗 的 语句 ， 第 一 行 是 计算 内 容 View 的 大 小 ， 使 得 其 属性 measured Width 具有 有 效 
值 ， 于 是 在 第 二 句 中 就 可 以 使 用 它 了 。 现 在 的 运行 效果 如 图 15-52 所 示 。 
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为 了 让 这 个 菜单 中 的 内 容 保持 正常 的 排版 ， 最 好 把 文字 的 字 
体 和 大 小 固定 下 来 ,否则 有 人 调整 系统 字体 后 ， 这 里 可 能 就 不 那 


4 "WT. "ime 
6. 自 定义 窗口 动画 2 
画 对 面 快 传 
现在 的 气泡 菜单 出 现 与 离 去 动作 是 有 动画 的 ， 是 系统 给 定 的 o 
默认 动画 ， 且 动画 时 间 比 较 短 。 而 QQ App 的 气泡 菜单 出 现时 没 
有 动画 ， 关 闭 时 用 了 缩小 动画 ， 且 动画 时 间 比 较 长 。 我 们 可 以 定 图 15-52 


制 一 下 PopupWindow 的 动画 ， 使 其 与 QQ App 相同 。 

新 版 的 Android 系统 中 为 PopWindow 增加 了 setEnterTransition()fll setExitTransition() 方 法 
来 设置 窗口 的 显示 和 隐藏 动画 ， 但 是 为 了 照顾 旧版 的 系统 ， 我 们 需要 使 用 另 一 个 方法 : 
setAnimationStyle0。 这 个 方法 需要 一 个 Style 型 资源 的 id， 动 画 就 包含 在 这 个 Style 中 ， 所 以 
首先 要 添加 一 个 Style。 在 res/values/styles.xml 文件 中 增加 新 的 style: 


<style name-"popoMenuAnim" parent-"android:Animation"^ 
«!--«item name-"android:windowEnterAnimation"» 
G&Ganim/popo menu show«/item»--» 
<item name-"android:windowExitAnimation"»8anim/popo menu hide«/item» 
</style> 


我 们 可 以 指定 窗口 显示 时 的 动画 (windowEnterAnimation ) 、 窗 口 消失 时 的 动画 
(windowExitAnimation)。 实 际 上 只 指定 了 消失 时 的 动画 , 这 样 在 显示 窗口 时 就 没有 动画 了 。 
现在 还 需要 创建 一 个 动画 资源 popo_menu_hide.xml， 放 在 res/anim F: 


«?xml version-"1.0" encoding="utf-8"?> 
«set xmlns:android-"http://schemas.android.com/apk/res/android" 
android:shareInterpolator-"8(android:anim/ accelerate interpolator" 
android:duration-"500"» 
«t-ASANEIE Ef, ERI 
«scale 
android:fromXScale-"1.0" 
android:toXScale-"0.0" 
android:fromYScale-"1.0" 
android:toYScale-"0.0" 
android:pivotX-"1002" 
android:pivotY-"02"» 
</scale> 


«alpha android:fromAlpha-"0.6" 
android:toAlpha-"0" /> 
X/set» 
这 个 动画 资源 中 包含 了 两 个 动画 ， 同 时 执行 ， 同 时 结束 ， 执 行 时 间 是 500 毫秒 〈 半 秒 ) 。 
第 一 个 动画 是 缩放 动画 ， 在 横 坐 标 和 纵 坐 标 上 都 是 从 100% 缩 小 到 0， 缩 小 的 中 心 点 我 们 在 X 
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轴 上 设 在 最 右边 Candroid:pivotX="100%") , 在 Y 轴 上 设 在 了 最 上 边 (android:pivotY="0%")， 
所 以 缩小 时 就 往 右 上 角 缩 。 
73 PopWindow 设置 动画 Style: 


textViewPopMenu.setOnClickListener ( 
//Élf& PopupWindow, HTAR TUHA 
val pop - PopupWindow (activity) 
pop.animationStyle = R.style.popoMenuAnim 


运行 App， 气 泡菜 单 的 出 现 和 消失 是 不 是 跟 QQ App — FE T? 
7. 按 下 返回 键 时 消失 


还 有 一 个 问题 没 解决 ， 出 现 气泡 菜单 后 ， 按 下 返回 键 菜单 不 消失 。 这 个 问题 很 容易 解决 ， 
只 需要 为 PopupWindow 对 象 调用 方法 setFocusable(true) 即 可 。 当 窗口 创建 后 设置 一 次 即 可 。 
下 面 是 响应 单 击 “+” 图 标的 所 有 代码 : 


textViewPopMenu.setOnClickListener ( 
// Él& PopupWindow, AFAR TAHA 
val pop - PopupWindow (activity) 
pop.animationStyle = R.style.popoMenuAnim 
// RBEBLETHLBIRE HERUBUA, BFE FERR BE AS REA 
pop.isFocusable = true 


// A] Fragment R$ (FrameLayout) 办 加 入 一 个 View fEZJ ESAE RIA 
val maskView = View(context) 

maskView.setBackgroundColor (Color.DKGRAY) 

maskView.alpha = 0.5f 


val rootView = view as FrameLayout 
rootView.addView( 
maskView, 
FrameLayout.LayoutParams.MATCH PARENT, 
FrameLayout.LayoutParams.MATCH PARENT 
) 
maskView.setOnClickListener ( 
ESL 
rootView.removeView (maskView) 
/ / aakh BT ET 
pop.dismiss(); 


} 
/ L Iit TERR, UEAK window MER 


val drawable = resources.getDrawable (R.drawable.pop bk,null) 
// QE TURRA window HER 

pop.setBackgroundDrawable (drawable) 

/ LIBUS, ZH LinearLayout KMH 

val menuView = LayoutInflater.from(activity) 


-inflate(R.layout.pop menu layout, null) as LinearLayout 
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) 


// KB window PESE view 
pop.contentView = menuView 
/ LEE TRA layout HERK D, BARRE 


menuView.measure (0, 0) 
A EARSBIET 
pop.showAsDropDown (it, -pop.contentView.measuredWidth-10,-10); 


现在 看 起 来 不 错 了 ， 但 是 还 存在 一 个 问题 : 当 气 泡 窗口 消失 时 ， 蒙 板 并 未 跟着 消失 。 下 面 


我 们 解决 这 个 问题 。 
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当 窗 口 消失 时 ， 蒙 板 也 应 该 消失 ， 比 如 按 下 返回 键 时 ， 窗 口 消失 ， 但 蒙 板 不 会 跟着 消失 。 
如 何 改正 这 个 问题 呢 ? 非常 容易 ， 窗 口 有 一 个 方法 setOnDismissListener0， 通 过 它 可 以 响应 窗 
口 的 消失 事件 ， 在 其 中 让 蒙 板 也 消失 即 可 ， 代 码 如 下 : 


) 


pop.setOnDismissListener ( 


// ERREK 


rootView.removeView (maskView) 


现在 ， 响 应 “+” 图 标 CtextViewPopMenu) 的 代码 如 下 : 


textViewPopMenu.setOnClickListener ( 


//&l& PopupWindow, AFAR TUKA 

val pop - PopupWindow (activity) 
pop.animationStyle = R.style.popoMenuAnim 

// BER OHR RRE, BHE FRISEUR EUT IR HAE 


pop.isFocusable = true 


// f] Fragment £t (FrameLayout) 办 加 入 一 个 View fEZS EEZSAE RISE 
val maskView = View(context) 

maskView.setBackgroundColor (Color.DKGRAY) 

maskView.alpha = 0.5f 


val rootView = view as FrameLayout 
rootView.addView( 
maskView, 
FrameLayout.LayoutParams.MATCH PARENT, 
FrameLayout.LayoutParams.MATCH PARENT 
) 
maskView.setOnClickListener ( 
41 BARERA H BT ET 
pop.dismiss (); 


} 


pop.setOnDismissListener { 
/I LEBER 


rootView.removeView (maskView) 
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} 

//L Init TERR, UEH window HER 

val drawable = resources.getDrawable (R.drawable.pop bk,null) 

// BIA GRE window EPA 

pop.setBackgroundDrawable (drawable) 

/ L IIECEHEIEEJR, ZH LinearLayout RMH 8 

val menuView = LayoutInflater.from(activity) 
-inflate(R.layout.pop menu layout, null) as LinearLayout 

// KE window Tfj view 

pop.contentView = menuView 

// TIE F3ESÉ layout MERAKI, BRM 

menuView.measure(0, 0) 

// ERRO 

pop.showAsDropDown (it,-pop.contentView.measuredWidth-10,-10); 

} 


15.3.10 HEAR 
TE QQ App 的 “消息 ”页 面 中 , 单 击 左上 角 的 QQ 头像 图 标 ， 会 从 左边 滑 出 一 个 页 面 ， 但 


这 个 页 面 不 会 占据 整个 界面 ， 而 是 在 右边 留 下 一 部 分 ， 这 部 分 正好 显示 “消息 ”页 面 的 图 标 ， 
如 图 15-53 和 图 15-54 所 示 。 


m 
BEGE WNR REST 
我 的 其 他 QQ 帐号 "x 
个 性 号 有 新 有 外 o O 了 解 会 员 特权 
Qo 服务 号 å 加 aone 
JARA: Usum 0705 更 新 
@ Ne 
WARUM 办 我 的 收藏 
Kal 我 的 相册 
C) 我 的 文件 
W 免 流 三 特权 13 
Oan’? taa ss 


图 15-53 15-54 


这 个 动作 是 有 动画 的 , 新 页 面 往 右 移 的 同时 消息 页 面 也 往 右 移 , 看 起 来 好 像 是 新 页 面 把 旧 
页 面向 右 推 ， 这 种 从 侧 边 滑 出 的 效果 叫 作 “ 抽 层 ”。Android SDK 在 其 AndroidX 库 中 提供 了 
一 个 抽 层 控件 DrawerLayout， 使 用 它 可 以 很 容易 地 做 出 一 种 抽 导 效果。 但 与 这 里 的 效果 有 些 
不 同 ，DrawerLayout 会 覆盖 在 原 页 面 的 上 面 ， 而 不 会 把 原 页 面 推 走 ， 所 以 我 们 不 能 利用 
DrawerLayout 控件 ， 而 需要 自己 实现 QQ App 的 抽 屠 效果 。 
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如 何 实现 呢 ? 思路 是 这 样 的 : 我 们 只 要 让 抽 层 页面 与 原 页 面 [  — —— 
属于 同一 个 Layout 控件 ， 为 新 页 面 和 原 页 面 分 别 设置 位 移动 画 ， | E Frametayout "m 
让 它们 同时 向 右 移 即 可 。 但 要 注意 ， 不 要 在 Layout 中 创建 抽 居 页 “| rename 
面 ， 只 有 当 单 击 QQ 头像 图 标 时， 我 们 才 动 态 创建 出 新 页 面 ， 把 四 imageview3 
它 加 入 父 控件 中 ， 并 开始 动画 。 A 
因为 一 切 发 生 在 MainFragment 中 ， 所 以 我 们 先 研究 一 下 E x 
MainFragment 的 控件 树 结 构 ， 当 前 MainFragment 中 的 控件 树 如 C5 Tabitem 
T: € 
根 FrameLayout 只 是 一 个 容器 , 页 面 的 主要 内 容 包 在 红 箭 头 指 
向 的 LinearLayout 中 。 为 什么 不 直接 把 LinearLayout 作为 根 呢 ? 还 图 15-55 


记得 前 面 实现 气泡 菜单 的 过 程 吗 ? 使 用 FrameLayout 的 原因 主要 是 它 内 部 的 控件 可 以 任意 摆 放 
位 置 , 且 后 添加 的 子 控件 能 覆盖 已 存在 的 子 控件 。 我 们 让 抽 层 效果 依然 发 生 在 FrameLayout 中 。 

我 们 动态 创建 抽 层 页面 并 添加 到 FrameLayout 中 ， 利 用 动画 移动 它 ， 同 时 也 利用 动画 移动 箭头 
所 指 的 LinearLayout。 因 为 用 代码 操作 这 个 LinearLayout， 所 以 将 ID 设置 为 “contentLayout”。 
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下 面 就 创建 抽 屈 Layout 资源 ， 模 仿 出 QQ 的 样子 。 
1. 创建 抽 导 页面 
添加 一 个 layout 资源 文件 drawer layoutxml， 在 其 中 创建 抽 届 页面， 其 内 容 如 下 : 


<?xml version-"1.0" encoding-"utf-8"?» 

*LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:orientation-"vertical" 
android:background-"8android:color/white" 
android:layout width-"match parent" 
android:layout height-"match parent"^ 

*LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:background-"6android:color/holo blue light" 
android:orientation-"vertical"^ 
«ImageView 
android:id-"8-id/imageView3" 
android:layout width-"wrap content" 
android:layout height-"40dp" 
android:layout gravity-"end" 
android:layout marginTop-"10dp" 
android:paddingTop-"1dp" 
app:srcCompat-"8drawable/barcode" /> 
«LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:background-" 8 android: color/ holo blue bright" 


android: 
android: 
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gravity-"center vertical" 


orientation-"horizontal" 


android:paddingBottom-"10dp" 
android:paddingEnd-"20dp" 


android: 
android: 


paddingStart-"20dp" 
paddingTop-"10dp"-» 


«Xandroidx.cardview.widget.CardView 
android:layout width-"40dp" 
android:layout height-"40dp" 
android:clipChildren-"true" 
app:cardCornerRadius-"20dp"^ 


«ImageView 
android:id-"Q(*id/imageView4" 


android:layout width: 
android:layout height- 


"wrap content" 
"wrap content" 


app:srcCompat-"8drawable/ contacts normal" /> 
«/androidx.cardview.widget.CardView^ 


«TextView 


android:id-"Q(id/textView8" 

android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"10dp" 
android:text=" 田 中 龟 孙 " 
android:textColor="@android:color/white" 


android:textSize="24sp" /> 
</LinearLayout> 
<TextView 
android:id="@+id/textView9" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"20dp" 
android:paddingBottom-"10dp" 
android:paddingTop-"10dp" 
android:text-"WEBe EE £ T, 4 X LESE" 
android:textColor-"8(android:color/white" /> 
«/LinearLayout^ 
«TableLayout 


android:layout width-"match parent" 
android:layout height-"Odp" 
android:layout weight-"i" 
android:padding-"6dp"^ 


<TableRow 


android: 
android: 
android: 


<ImageView 


layout_width="match_parent" 
layout_height="match_parent" 


gravity-"center vertical"» 
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android:id-"84id/imageView5" 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"8mipmap/ ic launcher round" 
«TextView 
android:id="e+id/textView10" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"10dp" 
android: text=" 了 解 会 员 特 权 " /> 
</TableRow> 
<TableRow 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:gravity-"center vertical"^ 
«ImageView 
android:id-"Q(id/imageView6" 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"8mipmap/ ic launcher round" 
«TextView 
android:id-"Q(id/textViewll" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"10dp" 
android:text-"QQ 钱包 " /> 
«/TableRow^ 
<TableRow 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:gravity-"center vertical"^ 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"&mipmap/ic launcher round" 
XTextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"10dp" 
android:text=" 个 性 装扮 " /> 
</TableRow> 
<TableRow 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:gravity="center_vertical"> 
<ImageView 
android:layout_width="40dp" 
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android:layout_height="40dp" 
app:srcCompat="@mipmap/ic launcher round" /> 
<TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"10dp" 
android:text=" 我 的 收藏 ” /> 
</TableRow> 
<TableRow 
android:layout width: 
android:layout heigh 


"match parent" 
"match parent" 
android:gravity-"center vertical"» 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"8mipmap/ ic launcher round" /» 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"10dp" 
android: text=" 我 的 相册 " /> 
</TableRow> 
<TableRow 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:gravity-"center vertical"^ 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"Gmipmap/ic launcher round" /> 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"10dp" 
android: text=" 我 的 文件 " /> 
</TableRow> 
<TableRow 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:gravity-"center vertical"^ 
«ImageView 
android:layout width-"40dp" 
android:layout height-"40dp" 
app:srcCompat-"Gmipmap/ic launcher round" /> 
«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
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android:layout marginLeft-"10dp" 
android:text=" 免 流量 特权 " /> 
</TableRow> 
</TableLayout> 


<LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:gravity-"center vertical" 
android:orientation-"horizontal" 
android:padding-"6dp"^ 
«ImageView 
android:layout width-"30dp" 
android:layout height-"30dp" 


app:srcCompat-"68mipmap/ ic launcher round" /» 


«TextView 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginRight-"30dp" 
android: text=" UE" /> 

«ImageView 
android:layout width-"30dp" 
android:layout height-"30dp" 


app:srcCompat-"8mipmap/ ic launcher round" /> 


android:layout weight-"1" 
android:text=" 夜 间 " /> 
«/LinearLayout» 
*/LinearLayout^ 


其 中 ，“@drawable/barcode ”是 一 一 张 条 形 码 图 片 明 则 .。 


注意 ， 抽 慑 页 面 的 背景 色 被 置 为 白色 ER EA 
"@android:colorwhite")， 如 果 不 设 置 颜色 的 话 , 默认 是 透明 的 。 
其 整体 预览 图 如 图 15-56 所 示 。 


2. 响应 头像 单 击 事件 e 


我 们 要 响应 的 是 图 15-57 中 所 指 的 控件 的 单 击 事件 。 


<TextView 
android:layout width- "wrap content" 
android:layout height- "wrap content" 


图 15-56 


设置 一 个 ia， 并 命名 为 headImage。 在 MainFragment 类 的 onViewCreated0 方 法 中 ， 添 加 


对 此 控件 的 单 击 侦 听 器 : 
LLBLBERS EARRA o ETE, I ERUIT 


headImage.setOnClickListener( 


) 
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i, fragment main.xml 


Palette. Q$ — $- Q- UÜPxl- » O17% © © A Attibutes Q 
Common | Ab ye E] ^1 ID headlmage 
Text Œ Button 4 

layout width ap_content 
Component Tree ga 

layout height tent 
IE] FrameLayout Doep a naeia 
* Ed contentlavoutisrti à T ImageView 

7 [I Line Imagevew |, srcCompat ?androidaatt 


四 headlmage A 
Ab textView3- “3. A. 


^ srcCompat. 


15-57 


实现 思路 是 : 首先 从 drawer layout.xml 创建 出 抽 层 页面， 然后 将 抽 层 页 面 加 入 根 View 
(FrameLayout) 中 ， 接 着 创建 动画 ， 使 抽 导 页面 从 左边 移出 来 ， 同 时 还 要 创建 动画 ， 使 原 内 
容 向 右 移 ， 直 到 只 剩 下 最 左边 那 一 列 图 像 为 止 。 

因为 原 内 容 并 不 是 全 部 消失 ， 而 是 剩余 左边 的 那 一 列 图 像 ， 此 
时 其 移 过 的 区 域 全 部 被 抽 居 页面 所 填充 ， 所 以 我 们 要 先 计算 出 这 列 
图 像 的 宽度 〈 见 图 15-58 中 A 处 ) ， 用 FrameLayout 的 宽度 减 去 这 
个 宽度 就 是 抽 居 页 面 的 宽度 ( 见 图 15-58 中 B 处 ) 。 

图 像 的 宽度 是 固定 的 ， 我 们 在 设计 消息 列表 的 Item Layout 时 
指定 了 图 像 为 50dp X Sodp 的 大 小 , 这 里 再 加 上 一 些 Margin 的 大 小 ， 
定 为 60dp。 注 意 ， 在 代码 中 ， 宽 度 单位 都 是 像素 ， 我 们 要 用 这 个 宽 
度 来 计算 抽 居 页 面 的 宽度 时 必须 把 dp 转 成 像素 (px) 。 这 个 转换 
很 简单 ， 根 据 屏幕 的 DPI 来 计算 即 可 。 创 建 一 个 Kotlin 文件 , 命名 | w naan 
为 utils.kt, 其 中 专门 提供 两 个 方法 , 用 于 从 dp 转 px、 从 px ££ dp, ET cL, die 
具体 代码 如 下 : 

fun dip2px (context: Context, dpValue: Float): Int { 

val scale = context.getResources() .getDisplayMetrics() .density 


return (dpValue * scale + 0.5f).toInt() 
) 


Ory e^ 


图 15-58 


fun px2dip(context: Context, pxValue: Float): Int ( 
val scale - context.resources.displayMetrics.density 
return (pxValue / scale + 0.5f).toInt() 

} 


使 用 这 些 方法 ， 先 计算 原 页 面 中 左边 那 列 图 像 的 宽度 : 
val messagelmageWidth = dip2px(activity!!,60.0f); 


再 计算 抽 导 页面 的 宽度 : 


val drawerWidth = view.width-messageImageWidth; 


有 了 这 个 宽度 ， 我 们 就 可 以 创建 位 移动 画 来 移动 抽 屋 页面 和 原 页 面 了 。 
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3. 动画 移动 抽 民 页 面 


我 们 创建 一 个 属性 动画 来 移动 它 。 抽 层 页 面 从 左边 移出 ， 主 要 动 的 是 X 轴 上 的 属性 ， 首 
选 “translationX”。 它 代表 了 控件 左边 界 (left) 在 义 轴 上 的 位 置 ， 初 始 值 应 为 负数 ， 这 样 才 
能 位 于 屏幕 的 左边 界 之 外 , 但 其 初始 值 并 非 “-drawerWidth”, 而 是 “-drawerWidth/2”， 因为 
QQ 中 的 抽 层 页面 并 不 是 从 无 到 有 的 ， 而 是 在 开始 移动 时 就 能 看 到 一 半 。 具 体 代 码 如 下 : 


// ÖRE EARRA s ETE, dde i E V IT 
headImage.setOnClickListener( 
// VETA REIT T 
val drawerLayout - activity!!.layoutInflater.inflate( 
R.layout.drawer layout, view as ViewGroup , false 


) 


11ER — FIBLEUR IPAE XE -HRR , EREE F REHE dp 
VIERE PR REMER, MUZ BRRA—F, BAITIE HRE, dp I 
11 ÉNRRRAET IIKI 

val messageImageWidth = dip2px(activity!!,60.0f) 

74 RERE, rootView Æ FrameLayout, 

// FIfll getwidth () TRE E MHIE 

val drawerWidth = view.width-messageImageWidth 

4/1 EEE ThE TR TRI ERE 

drawerLayout.layoutParams.width = drawerWidth 

/HÉSIBEERBIILA FrameLayout 办 


view.addView (drawerLayout) 


/ LBSDIBEAEAERINT RT 

val duration = 500L; 

/ / EJ — NSTIBI, EREE, ZERCEBMIEXDBEHDKR, 

BURUEN BUE BU -drawerwidth/2, HUE Ætt FREZI 

val animatorDrawer = ObjectAnimator.ofFloat (drawerLayout, 
"translationX",-drawerWidth/2f,0f) 

animatorDrawer.duration = duration 

animatorDrawer.start() 


) 


这 段 代 码 放 在 onViewCreated0 中 比较 好 。 运 行 App， 登 录 进入 主页 面 ( 见 图 15-59) ， 单 
击 箭头 所 指 的 头像 图 标 ， 出 现 动 画 ， 动 画 完 成 后 效果 如 图 15-60 所 示 。 
原 内 容 并 没有 移动 ， 所 以 那 列 图 像 并 没有 移 到 右边 去 。 下 面 让 原 内 容 也 动 起 来 。 


4. 动画 移动 原 内 容 


我 们 应 该 为 原 内 容 设置 不 透明 的 背景 色 , 否则 在 移动 过 程 中 会 有 “不 可 描述 ”的 现象 发 生 。 
打开 文件 fragment main.xml， 为 内 容 的 根 控件 设置 白色 背景 OLA 15-61) 。 
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图 15-59 图 15-60 


Component Tree dod Attributes a| 
* 0 FrameLayout 


E inearLayout) (verti layout_width match_parent 
* Iil LinearLayout (hor™ layout_height match_parent 


M headimage (ImageView) > Layout_Margin 92227 


i ^textView3 “和 可 * Padding 522,27] 
i ^ textViewPopMenu `: * Theme 
'& viewPager (QQViewPager) elevation 
+ "'tabLayout background Gandroid:color/white 
Pi Tabitem i 
ii Tabltem 
B Tabitem accessibilityTraversalAfter 


图 15-61 
要 在 代码 中 操作 这 个 控件 ， 所 以 要 为 它 设置 it， 可 以 在 图 15-1 中 看 到 我 们 把 它 的 id 设置 


为 “contentLayout”。 
在 代码 中 , 我 们 首先 要 获取 这 个 控件 对 象 , 然后 为 它 创建 一 个 属性 动画 , 将 它 从 当前 位 置 
(就 是 0, 因 其 left 位 于 X 轴 上 的 0 位 置 一 一 这 都 是 相对 于 其 父 控件 来 说 的 ) 移 到 drawerWidth 
的 位 置 。 注意， 由 于 抽 导 页面 是 后 添加 的 ， 因 此 位 于 原 内 容 的 上 层 ， 这 样 在 移动 中 抽 导 页面 会 
盖 住 原 内 容 的 一 部 分 , 但 QQ 中 的 效果 却 不 是 这 样 ， 而 是 原 内 容 始 终 可 见 。 这 就 需要 将 原 内 容 
移 到 上 层 来 ， 只 需 调用 原 内 容 根 控件 的 方法 bringToFront0 即 可 。 具 体 代码 如 下 〈 见 最 后 加 粗 
部 分 ) : 
LLBLBERE ERRERA s ETE, IERE 
headImage.setOnClickListener( 
/ / CVETA ET 
val drawerLayout = activity!!.layoutInflater.inflate( 


R.layout.drawer layout, view as ViewGroup , false 


) 
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11ER — RIETI. ID HEPIILACAN, ERRER PREEZ dp 
1ER PRERE, BEDUS EEEUER — P, AATE RARE, dp XE 
11 KRERET IIK 

val messageImageWidth = dip2px(activity!!,60.0f) 

// tR, rootView Æ FrameLayout, 

// FI getWidth () PTF EHIE 

val drawerWidth = view.width-messagelmageWidth 

4/1 BEE Íh RET RET 

drawerLayout.layoutParams.width = drawerWidth 

/LHÉSHIBEERIBIILA FrameLayout 办 


view.addView (drawerLayout) 


/ L BIMBIAEAERI IR] 

val duration - 500L; 

// É& P3, ERTA, EE CENE HRH, 

/LBEUDUCEIS E E R E-darawerwidth/2, HUE —# tt FARZI 

val animatorDrawer = ObjectAnimator.ofFloat (drawerLayout, 
"translationX",-drawerWidth/2f,0f) 

animatorDrawer.duration = duration 

animatorDrawer.start() 


/LHEIRPSEEIUBEEETERURIBE ER, XXFEZEBESIEI EE EE SIE (Qo BEEUINIERO 

this.contentLayout.bringToFront(); 

// 6IBESII, BAERE, M 0 AT BEBESTAI BERI RE EHE E. ORREZ) 

val animatorContent - ObjectAnimator.ofFloat(contentLayout, 
"translationX",0f, drawerWidth.toFloat()) 

animatorContent.duration = duration 

animatorContent.start(); 


) 
现在 可 以 把 原 内 容 移 到 合适 的 位 置 了 ,但 是 还 有 一 个 问题 , 原 内 容 需 要 在 移动 中 逐渐 变 暗 ， 
这 个 就 需要 蒙 板 效果 了 。 当 然 蒙 板 效果 不 是 现成 的 ， 我 们 需要 自己 做 。 


5. 移动 中 逐渐 变 暗 


实现 起 来 稍微 复杂 一 点 ， 可 以 为 FrameLayout 创建 一 个 子 控件 ， 专 门 做 蒙 板 ， 因 为 在 
FrameLayout 中 ， 所 以 很 容易 把 它 盖 到 原 内 容 控 件 的 上 层 。 在 动画 执行 过 程 中 ， 蒙 板 控件 还 要 
变 得 越 来 越 不 透明 ， 所 以 我 们 再 创建 一 个 动画 对 象 , 用 于 移动 蒙 板 控件 。 同 时 还 要 让 蒙 板 逐渐 
变 得 不 透明 ， 所 以 还 要 创建 一 个 动画 。 总 之 ， 要 为 蒙 板 创建 两 个 动画 。 

创建 蒙 板 及 其 动画 的 代码 ， 见 下 面 源码 中 的 加 粗 部 分 : 

// ÉE LARRA s ETE, ERE 

headImage.setOnClickListener( 

/ / ELE TIBERI 


val drawerLayout - activity!!.layoutInflater.inflate( 


R.layout.drawer layout, view as ViewGroup , false 
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) 


11ER RIBERA b -HERK , EREE IEEE dp 
LHENRBIT REIR, BEDUS EEBUER — P, BIASVIIIBUBEREAHHERS, dp XJA 
11 KRERET IIO 

val messageImageWidth = dip2px(activity!!,60.0f) 

7/1 tHE, view Æ FrameLayout, 

// Tfl getwidth () TRR ERRER 

val drawerWidth = view.width-messagelmageWidth 

LL EE Th REIT TETI EPE 

drawerLayout.layoutParams.width = drawerWidth 

/HSEBERIBILA FrameLayout 办 


view.addView(drawerLayout) 


/ LBSIIBEAEAERSINT RT 


val duration = 500L; 


/ / ÉJ& — INST, ikh, ZERCELE M IEXDBEHDR, 

// BURUE BEES -drawerwidth/2, HUE —# tt FEREZA 

val animatorDrawer = ObjectAnimator.ofFloat (drawerLayout, 
"translationX",-drawerWidth/2f,0f) 


LHEIIBSREHREISTEUEIE Et, BEBE — ESI (00 BEBE INRURO 

this.contentLayout.bringToFront(); 

/ / VÆG, BEDENE, MO f EEGEN ERER GERCIUEREIEO 

val animatorContent = ObjectAnimator.ofFloat (contentLayout, 
"translationX",0f, drawerWidth.toFloat()) 


//8I& S i view 

val maskViewDrawer = View(context) 
maskViewDrawer.setBackgroundColor (Color.GRAY) 
11 BARRE HRE RS SE 897 
maskViewDrawer.alpha = Of 

// 证 加 到 FragmentIayout 办 

view.addView (maskViewDrawer) 

IHR view QIREZ 


maskViewDrawer.bringToFront() 


// BEBE SIRE IESU 
val animatorMask = ObjectAnimator.ofFloat (maskViewDrawer, 
"translationX",0f,drawerWidth.toFloat()); 


// VEREEN ENE IURI 
val animatorMaskAlpha = ObjectAnimator.ofFloat (maskViewDrawer,"alpha", 
0£,0.6£); 


//8lgs)H AE, IRN 


val animatorSet - AnimatorSet() 
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animatorSet.playTogether (animatorContent, animatorMask,animatorMaskAlpha, 
animatorDrawer); A 
animatorSet.duration = duration 


animatorSet.start() 


(OTEA 


) 


THEEEST, AXE 


现在 能 显示 抽 居 页 面 了 ， 但 是 还 不 能 隐藏 它 。 同 时 ， 当 手指 
在 原 内 容 的 那 列 图 像 上 上 下 滑动 时 ， 图 像 竞 然 能 跟着 上 下 深 动 ! 
这 可 不 是 我 们 期 望 的 。 按 常理 ， 原 内 容 上 面 盖 了 个 蒙 板 控件 ， 触 
摸 应 被 蒙 板 控 件 挡住 才 对 , 怎么 能 传递 到 下 一 层 View 上 呢 ? 这 就 ps 
是 Android 聪明 的 地 方 : 上 层 View 如 果 是 半 透 明 的 且 没有 设置 的 触摸 响应 侦 听 器 ， 就 会 把 触 
摸 事 件 传递 到 下 一 层 View。 要 改变 这 个 问题 很 容易 ， 只 需要 为 蒙 板 View 设置 侦 听 器 即 可 。 
同时 我 们 要 在 单 击 蒙 板 View 时 让 抽 层 消失， 所 以 也 应 该 为 蒙 板 View 设置 侦 听 器 。 在 响应 方 
法 中 ,我们 创建 与 前 面相 反 的 动画 即 可 ,前 面 是 从 左 向 右 移 ， 这 里 就 从 右 向 左 移 ， 做 法 不 再 资 
述 ， 具 体 代码 如 下 : 


// Brel view M, RETI UT 
maskViewDrawer.setOnClickListener( 
/LBIBIIEK, IEEE 
/ / BIRERTIBI, DENR, M 0 t BEZGAN ERER ORR ERETTE) 
val animatorContent = ObjectAnimator.ofFloat (contentLayout, 
"translationX", drawerWidth.toFloat(),0f) 
/ EDRR AIZE 
val animatorMask = ObjectAnimator.ofFloat (maskViewDrawer, 
"translationX", drawerWidth.toFloat(),0f) 
/ / ENER BOE ZE EUST 
val animatorMaskAlpha - ObjectAnimator.ofFloat (maskViewDrawer, "alpha", 
0.6f, 0f); 
// NÆ, ERA, AE CENE DE HRH, 
JL BURIE ERE Y-drawerWwidth/2, BUE Ætt FEREZA 
val animatorDrawer = ObjectAnimator.ofFloat (drawerLayout, 
"translationX", 0f,-drawerWidth/2f) 


11 ENEJA, IETHER 4 个 动画 


val animatorSet = AnimatorsSet () 


€» 

需要 注意 的 是 ， 我 们 把 4 个 动画 放 到 一 个 set 中 一 起 播放 了 ， | cen e 

所 以 不 再 单独 为 每 个 动画 调用 start0 方 法 。 a cm e 
运行 App， 抽 层 的 出 现 过 程 已 基本 达到 要 求 ， 动 画 完成 后 的 “| 二 LL. = 
效果 如 图 15-62 所 示 。 d sees e 
B ane ed 

6. 隐藏 抽 必 页 面 rp e 
e» 


| 


Moz aeo 


animatorSet.playTogether (animatorContent,animatorMask,animatorMaskAlpha, 
animatorDrawer) 


animatorSet.duration = duration 


// REWI, ERAKAR E 
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animatorSet.addListener(object : Animator.AnimatorListener( 
override fun onAnimationRepeat(p0: Animator?) {} 
override fun onAnimationEnd(p0: Animator?) ( 
VIDAR, VESEBCRIMUE REDE 
view.removeView (maskViewDrawer); 
view.removeView (drawerLayout); 
} 
override fun onAnimationCancel (p0: Animator?) {} 
override fun onAnimationStart (p0: Animator?) {} 
n 
animatorSet.start(); 


) 


注意 加 粗 的 代码 ， 它 响应 动画 结束 事件 。 由 于 在 侦 听 器 类 内 使 用 了 外 部 类 的 一 些 变量 ,所 
以 这 些 变量 都 在 定义 时 使 用 了 “val” 修 饰 符 。 
Jab, dun CR E! 现在 MainFragment::onViewCreated() 方 法 的 全 部 代码 如 下 : 


override fun onViewCreated(view: View, savedInstanceState: Bundle?) { 
super.onViewCreated(view, savedInstanceState) 


//41$ Adapter HE4 ViewPager Xø 
viewPager.adapter = ViewPageAdapter() 
tabLayout.setupWithViewPager (viewPager); 


LLTBTBER EARRA d ETE, dI ERUIT 


headImage.setOnClickListener( 


/ / GNET E TR IET 
val drawerLayout = activity!!.layoutInflater.inflate( 
R.layout.drawer layout, view as ViewGroup , false 


) 


LL ÓBETHE— FIBLBURPPE E -HRR A EREE r RE HE dp 
V/EREPR RERE, MUZ HSEIRERE — P, BDSVIEIBUBEREAMEE, dp JI 
/ LBEEEDEUINETÉG 

val messagelmageWidth = dip2px(activity!!,60.0f) 

71t RRE, view Æ FrameLayout, 

// FI getwidth () ATIII E RIHI SERE 

val drawerWidth = view.width-messageImageWidth 


// Ehh T THI ERE 


drawerLayout.layoutParams.width = drawerWidth 
// REMA FrameLayout 办 


view.addView (drawerLayout) 


// DEIF EK 


val duration = 500L; 


// li — SH, ERA, AREEN EXUBEHDRES, 

I LBEDUCHIHA E BEIEBUy-drawerWidtn/2, BUE —# fi FARZI 

val animatorDrawer = ObjectAnimator.ofFloat (drawerLayout, 
"translationX",-drawerWidth/2f,0f) 
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LEISURE TER EIIE EET, BEEE E — ELEESI'E (00 BER INAURO 

this.contentLayout.bringToFront(); 

/ /BIEESIIB, BIERE, M 0 PTBEEERITE ERUIT REHOREI PERCHE EO 

val animatorContent = ObjectAnimator.ofFloat (contentLayout, 
"translationX",0f, drawerWidth.toFloat()) 


// VÆRK View 
val maskViewDrawer = View(context) 
maskViewDrawer.setBackgroundColor (Color.GRAY) 
11 BRRR AE HE RU TERT 
maskViewDrawer.alpha = 0f 
/ / i&ÍIllSl FragmentLayout 办 
view.addView (maskViewDrawer) 
/ 88 E View KERER 
maskViewDrawer.bringToFront() 
// 286 dS view Pf, BEI T 
maskViewDrawer.setOnClickListener( 
// BIBIAER,. iHBEEAE 
/ / BIEEZIIB, BIRERE, M 0 EB EREEREER PERIERE EO 
val animatorContent = ObjectAnimator.ofFloat(contentLayout, 
"translationX", drawerWidth.toFloat(),0f) 
// ERR KIZ 
val animatorMask = ObjectAnimator.ofFloat (maskViewDrawer, 
"translationX", drawerWidth.toFloat(),0f) 
// VERNE EFEK 


val animatorMaskAlpha = ObjectAnimator.ofFloat (maskViewDrawer, 


"alpha", 0.6f, 0f); 


// 60E), ERTA, ECEN EDE HKH, 

V/B UR fr BEEBU-drawerwidtn/2, A Ætt FEREZA 

val animatorDrawer = ObjectAnimator.ofFloat (drawerLayout, 
"translationX", 0f,-drawerWidth/2f) 


A: E TE LAA 
val animatorSet = AnimatorSet() 
animatorSet.playTogether (animatorContent,animatorMask, 


animatorMaskAlpha,animatorDrawer) 
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animatorSet.duration = duration 
/LBHEITER, EXHI AE AEE 
animatorSet.addListener(object : Animator.AnimatorListener( 
override fun onAnimationRepeat(p0: Animator?) {} 
override fun onAnimationEnd(p0: Animator?) { 
VIGER, HERBATE VELIE 
View.removeView (maskViewDrawer); 
view.removeView(drawerLayout); 
} 
override fun onAnimationCancel (p0: Animator?) {} 
override fun onAnimationStart (p0: Animator?) {} 


0£,0.6£); 
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n 
animatorSet.start(); 


) 
// BTREBERU SE BE UST 


val animatorMask = ObjectAnimator.ofFloat (maskViewDrawer, 
"translationX",0f,drawerWidth.toFloat()); 
// VÆRRE AENA KIZI 


val animatorMaskAlpha = ObjectAnimator.ofFloat (maskViewDrawer, "alpha", 


// UZRA, FIU MERC INS 
val animatorSet = AnimatorSet () 
animatorSet.playTogether (animatorContent,animatorMask, 


animatorMaskAlpha,animatorDrawer); 


} 


animatorSet.duration = duration 
animatorSet.start() 


textViewPopMenu.setOnClickListener ( 


//Él& PopupWindow, AFAR TURA 

val pop - PopupWindow (activity) 
pop.animationStyle = R.style.popoMenuAnim 

// RER OHR EEG, BE FAR R BL EUT ER HAE 


pop.isFocusable - true 


// lH] Fragment Z4 (FrameLayout) 办 加 入 一 个 View fEZy EEUSAERISEER 
val maskView - View(context) 

maskView.setBackgroundColor (Color.DKGRAY) 

maskView.alpha = 0.5f 


val rootView = view as FrameLayout 
rootView.addView( 
maskView, 
FrameLayout.LayoutParams.MATCH PARENT, 
FrameLayout.LayoutParams.MATCH PARENT 
) 
maskView.setOnClickListener ( 
/ / BERE HL BIET 
pop.dismiss(); 
) 
pop.setOnDismissLlistener { 


// ERRE 


rootView.removeView (maskView) 
) 
/L Ife TARR, DEN window MER 


val drawable = resources.getDrawable(R.drawable.pop bk,null) 
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// BE TURRA window HAR 

pop.setBackgroundDrawable (drawable) 

/L ISESES ERR, ÆA LinearLayout MHH SÉ 

val menuView = LayoutInflater.from(activity) 
-inflate(R.layout.pop menu layout, null) as LinearLayout 

// B window FH EEER f View 

pop.contentView — menuView 

/FFIE- F3ESÉ layout MERAKI, BaRa 

menuView.measure (0, 0) 

// EAS BEEI 

pop.showAsDropDown (it,-pop.contentView.measuredWidth-10,-10); 


) 
15.3.41. 创建 “联系 人 ”页 Es 
QQ App 中 联系 人 页 面 如 图 15-63 所 示 。 m e a ma 
整个 页 面 〈 红 框 内 所 示 ) 是 可 以 滚动 的 ， 比 较 牛 的 是 它 并 不 | eeo ; 
是 按照 一 般 的 方式 滚动 ,向 上 滚动 时 ， 当 箭头 所 指 的 那 一 行 到 项 mus 
部 时 ， 这 一 行 不 再 向 上 滚动 ， 而 只 是 其 下 的 内 容 会 向 上 滚 ， 也 就 “| 入 aas 
是 说 箭头 所 指 的 这 一 行 会 一 直 显示 。 | quem 
这 种 效果 是 怎么 做 出 来 的 呢 ? 首先 我 们 能 想到 的 是 用 两 个 "mh 
能 提供 内 容 滚 动 的 View( 比 如 Scroll View 或 RecyclerView 等 )， 家 人 
一 个 位 于 另 一 个 内 部 ， 当 外 部 View 的 内 容 滚 到 一 定位 置 时 内 部 "te n A 


View 开始 滚动 。 但 是 这 个 效果 不 是 随意 放 两 个 滚动 View 就 可 以 
实现 的 ， 需 要 解决 以 下 两 个 问题 : 图 15-63 

首先 是 触摸 的 问题 。 触 摸 到 的 一 般 是 内 部 View， 而 不 是 外 部 的 ， 也 就 是 说 内 部 View 先 
收 到 事件 ， 当 它 处 理 完 滚 动 事件 后 ， 事 件 就 没 了 ， 于 是 外 部 滚动 View 不 会 收 到 滚动 事件 。 所 
以 在 内 部 滚动 View 中 摸 来 摸 去 时 ,只 看 到 内 部 滚动 View 的 内 容 动 , 外 部 View 的 内 容 是 不 会 
动 的 。 

其 次 是 如 何 让 处 于 滚动 View 中 某 个 位 置 的 View( 和 它 下 面 的 View) 永远 显示 ， 即 它 滚 
动 到 项 就 不 再 滚动 了 。 默 认 的 滚动 实现 都 不 支持 这 样 的 功能 。 

如 何 才能 解决 这 两 个 问题 呢 ? 其 实 还 真 不 难 ， 只 需要 使 用 几 个 现成 的 View 即 可 。 

要 解决 第 一 个 问题 ， 需 要 用 到 支持 “Nested Scroll (和 嵌 套 滚动 ) ”的 View。 两 个 都 支持 
Nested Scroll 的 控件 才能 配合 起 来 滚动 ， 因 为 处 于 内 部 的 滚动 View 会 处 理 完事 件 后 把 事件 再 
传递 给 外 部 的 滚动 View。 早 期 出 现 的 ScrollView 和 ListView 都 不 支持 舱 套 滚动 ， 而 处 于 
AndroidX 库 ( 以 前 的 版 本 中 叫 support 库 ) 中 很 多 支持 内 容 滚动 的 控件 都 能 支持 Nested Scroll, 
比如 RecyclerView, NestedScrollView 等 ， 我 们 这 里 正好 要 用 到 这 两 个 控件 ， 外 部 使 用 
NestedScrollView， 内 部 使 用 RecyclerView。 

要 解决 第 二 个 问题 ， 需 要 用 到 一 个 特殊 的 控件 : AppBarLayout。 看 名 字 这 个 控件 似乎 是 专 
用 于 设计 AppBar 的 ， 其 实用 于 内 容 中 也 没有 问题 。 它 是 不 支持 滚动 的 ， 但 如 果 把 它 和 一 个 支 
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FRERIK View 一 起 放 在 另 一 个 支持 嵌 套 滚动 的 View 中 ， 再 进行 一 些 设置 ， 就 能 最 终 设 
计 出 我 们 需要 的 效果 。 


1. 添加 联系 人 Layout 资源 


当前 的 联系 人 页 面 是 一 个 RecyclerView, 与 消息 
页 面 和 动态 页 面 共 同位 于 一 个 ViewPager 中 , 实现 了 
Tab 翻 页 功能 。 我 们 下 面 改 一 下 联系 人 这 个 页 面 ， 现 
在 它 不 能 仅 用 一 个 RecyclerView 了 ， 而 且 需 要 复杂 
的 Layout， 其 结构 主要 分 成 三 部 分 : 最 外 面 是 一 个 
NestedScrollView, 其 内 包含 一 个 AppBarLayout 和 一 
个 RecyclerView, AppBarLayout 在 RecyclerView 的 
上 面 。 效 果 如 图 15-64 所 示 。 图 15-64 
上 面 框 区 是 RecyclerView， 下 面 框 区 是 AppBarLayout. AppBarLayout 中 有 四 行 〈 四 个 箭 
所 指 ), 顶端 行 利用 了 我 们 前 面 创建 的 搜索 行 Layout( 其 文件 是 message list item search.xmD, 
它 的 下 一 行 是 一 个 横向 的 LinearLayout， 里 面包 含 了 两 个 TextView， 再 往 下 一 行 仅 用 作 分 割 ， 
所 以 只 是 一 个 简单 的 FrameLayout， 最 下 面 是 一 个 TabLayout。 为 这 个 Layout 资源 创建 
contacts page layout.xml 文件 ， 内 容 如 下 : 


«?xml version="1.0" encoding="utf-8"?> 
«androidx.coordinatorlayout.widget.CoordinatorLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:paddingLeft-"10dp" 
android:paddingRight-"10dp" 
android:paddingTop-"8dp"^ 
Xcom.google.android.material.appbar.AppBarLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:background-"6&android:color/background light" 
android:fitsSystemWindows-"false"^ 


<include layout-"G8layout/message list item search" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
app:layout scrollFlags-"scroll"/» 


*LinearLayout android:layout width-"match parent" 
android:layout height-"40dp" 
app:layout scrollFlags-"scroll"^ 


XTextView android:layout width-"match parent" 
android:layout height-"wrap content" 


android:layout gravity-"center vertical" 
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android:layout weight-"1" 
android:text=" 新 朋友 " /> 


<TextView android:layout width: rap content" 


android:layout heigh wrap content" 
android:layout gravity-"center vertical" 


android:text-"»"/» 
«/LinearLayout^ 


XFrameLayout android:layout width-"match parent" 
android:layout height-"10dp" 
android:background-"?attr/colorButtonNormal" 
app:layout scrollFlags-"scroll"^ 


«/FrameLayout^ 


«com.google.android.material.tabs.TabLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
app: tabMode-"scrollable"^ 


«android.support.design.widget.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text=" 好 友 " /> 


<com.google.android.material.tabs.TabItem 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android: text=" 群 "/> 


<com.google.android.material .tabs.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text-"£ AWR" /> 


<com.google.android.material.tabs.TabItem 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android: text=" H% "/> 


<com.google.android.material.tabs.TabItem 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android: text=" MR" /> 


«com.google.android.material.tabs.TabItem 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:text=" 公 众 号 "/> 

</com.google.android.material.tabs.TabLayout> 
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«/com.google.android.material.appbar.AppBarLayout^ 


Xandroidx.recyclerview.widget.RecyclerView 
android:id-"G*id/contactListView" 
app:layout behavior="es tring/ appbar scrolling view behavior" 
android:layout width-"match parent" 
android:layout height-"match parent"/» 


«/androidx.coordinatorlayout.widget.CoordinatorLayout^ 


注意 ，AppBarLayout 中 的 各 View 除了 TabLayout 之 外 ， 都 有 一 个 属性 : 
app:layout_scrollFlags="scroll"。 设 成 scroll 表示 这 个 控件 可 以 滚 出 显示 区 ， 不 设 的 话 ， 这 个 
控件 就 深 不 出 显示 区 。TabLayout 就 没有 设置 ， 因 为 它 要 保持 在 顶部 。 

最 外 层 控件 是 CoordinatorLayout, AppBarLayout 只 有 在 它 里 面 才能 与 某 些 深 动 View 配合 ， 
完成 一 些 特殊 效果 ， 但 是 滚动 View 必须 设置 属性 app:layout behavior 的 值 为 
"@string/appbar_scrolling_view_behavior"， 因 为 需要 让 RecyclerView 与 AppBarLayout 配合 ， 
所 以 我 们 为 RecyclerView 设置 了 这 个 属性 。 

最 后 注意 , RecyclerView 的 id 被 设置 成 了 contactListView, 因为 后 面 要 在 代码 中 操作 它 。 


2. 修改 MainFragment 的 代码 
我 们 原先 为 “消息 ”“ 联 系 人 ”“ 动 态 ” 三 个 页 面 创 建 的 都 是 RecyclerView, 现在 “联系 


人 ”页 面 需 要 改 为 从 Layout 资源 文件 创建 ， 所 以 相关 代码 要 进行 改动 。 
需要 改 一 下 包含 三 个 页 面 的 数组 变量 (在 MainFragment 类 中 ) : 
// 0I — HEEL, HEPER, NARI 
private val listViews = arrayOfNulls«RecyclerView?» (3) 
变 为 : 
// Ug — IHE, HENTER, LAKES 
private val listViews = arrayOfNulls«ViewGroup?» (3) 
创建 三 个 页 面 的 代码 : 
// Bf ^^ Recyclerview, AMI oo HEH. Qo KRAH. oo FA 
listViews[0]-RecyclerView(context!!); 
listViews[1]-RecyclerView(context!!); 
listViews [2]-RecyclerView (context!!); 
变 为 : 
//ül& — RecyclerView, FAXE 00 WRA, 00 KRAH., oo FIA 
val vl = RecyclerView(context!!) 
val v2 - layoutInflater.inflate(R.layout.contacts page layout,null) as 
ViewGroup 
val v3 = RecyclerView(context!!); 
listViews[0] = v1 
listViews[1] = v2 
listViews[2] = v3 
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单独 创建 三 个 View 的 原因 是 三 个 页 面 的 类 型 不 再 统一 为 RecyclerView， 后 面 处 理 时 调用 
方法 也 不 同 了 。 

设置 LayoutManager 和 适配器 的 语句 : 

// JB —f RecyclerView KE 


listViews[0]!'.adapter = MessagePageListAdapter() 
listViews[0]!'.layoutManager = LinearLayoutManager (context) 


变 为 : 


// 为 RecyclerView I ÉIEATAS 5 LayoutManager 

// HBR 

(listViews[0] as RecyclerView).let( 
it.adapter = MessagePagelistAdapter() 
it.layoutManager = LinearLayoutManager (context) 


) 
// RAHIT 


val contactListView = listViews[1]!'.findViewById«RecyclerView» 
(R.id.contactListView) 

contactListView.adapter = ContactsPageListAdapter() 

contactListView.layoutManager = LinearLayoutManager(context) 


注意 ， 把 为 了 测试 而 设置 背景 色 的 代码 去 掉 了 。 

为 联系 人 RecyclerView 提供 数据 的 类 叫 作 ContactsPageListAdapter。 我 们 需要 创建 这 个 类 ， 
把 它 放 在 与 MessagePageListAdapter 相同 的 包 下 .ContactsPageListAdapter 现在 还 是 一 个 空 壳 ， 
内 容 如 下 : 

class ContactsPageListAdapter : 

RecyclerView.Adapter«ContactsPageListAdapter.MyViewHolder»()í 


override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): 
MyViewHolder ( 
TODO("not implemented") 


override fun getItemCount(): Int ( 
TODO("not implemented") 


override fun onBindViewHolder(holder: MyViewHolder, position: Int) ( 
TODO("not implemented") 


class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { 
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运行 App， 效 果 如 图 15-65 所 示 。 

现在 RecyclerView 中 什么 也 没有 。 可 以 试 一 下 ,在 
上 下 滚动 时 ，TabLayonut 行 滚 到 最 上 端 后 不 再 往 上 滚动 ， 
它 会 一 保持 在 显示 区 。 


下 面 还 需要 实现 的 是 点 TabLayout 行 上 的 Item 时 切 Hk — 群 SAUR Bë 通讯 录 和 
换 页 面 。 这 个 功能 其 实 与 最 下 面 的 TabLayout (消息 、 联 
系 人 这 一 行 ) 相似 ， 实 现 的 话 需要 改 一 下 文件 Bises 


contacts page layout.xml , 把 RecyclerView 变 为 
ViewPager， 为 这 个 ViewPager 创建 Adapter， 通 过 Adapter 向 ViewPager 返回 每 个 页 的 
RecyclerView。 这 里 只 提 一 下 ， 可 以 自己 去 试 一 下 。 下 面 我 们 实现 的 是 另 一 个 功能 一 一 “展开 
- 收 起 ”。 

3. 列表 行 的 “展开 - 收 起 ”功能 


QQ App 中 好 多 页 面 的 列表 控件 都 有 “展开 - 收 起 ”的 功能 , 比如 “联系 人 ”页 面 中 的 “好 
友 ” 页 面 R 15-66) 。 


" 
新 朋友 新 朋友 
好 友 OM 多 人 聊天 。 设备 — AG 好 友 m" SAWE Rí ”通讯 录 
vio senio 
我 的 好 : 
umm u 
am 一 
ma 
*A 
本 E 
G 2 e 
图 15-66 


这 种 列表 控件 看 起 来 像 树 控件 ， 有 的 行 拥有 子 行 。 比 如 “我 的 好 友 ” 这 一 行 , 单 击 一 下 左 
边 的 箭头 ， 就 变 成 展开 状态 ， 下 面 出 现 了 两 行 。 

Android 中 有 没有 能 实现 这 种 效果 的 控件 呢 ? 有 ! ExpandableListView。 但 是 ， 它 是 从 陈 
旧 的 ListView 派生 的 ， 不 支持 新 的 滚动 特性 。 为 了 以 后 容易 升级 ， 还 是 支持 新 特性 比较 好 。 
其 实 ， 我 们 可 以 从 RecyclerView 自己 派生 出 一 个 树 控件 。 当 然 这 是 很 麻烦 的 ， 最 好 的 选择 还 
是 使 用 网 上 已 经 存在 的 第 三 方 控件 。 因 为 网 上 充满 了 活 雷 锋 , 为 大 家 提供 了 数 不 清 的 功能 多 样 
的 控件 。 笔 者 已 经 准备 了 一 个 树 控件 库 RecyclerListTreeView， 源 码 托管 在 GitHub 上 (GitHub 
是 国外 的 一 个 网 站 ， 供 大 家 免费 存放 代码 ， 也 为 公司 提供 有 偿 项 目 托管 ) ， 项 目 网 址 是 
https://github.com/miugao/RecyclerListIreeView。 
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虽然 名 字 叫 RecyclerListTreeView， 但 是 它 并 不 是 一 个 View 类 ， 而 是 实现 了 树 控件 功能 
的 几 个 类 的 集合 ， 也 就 是 一 个 Library Æ) 。 可 以 把 这 个 项 目 从 GitHub 上 下 载 下 来 试 一 下 。 
下 载 方法 很 简单 ,进入 项 目 主页 , 单 击 “Clone or download 克隆 或 下 载 )” 按 钮 ( 见 图 15-67). 
就 会 显示 出 如 图 15-68 所 示 的 页 面 。 


D niugao / RecyclerListTreeView QUnwath- 3 —*Unsar 29 — Yr 8 
© Code Issues 5 Pullrequests © Pi Projects 0 Wiki Insights — O Settings 

The fastest android Tree View based on RecyclerView Edit. 

Manage topics 


(9 39 commits P 1 branch €» 0 releases 44 2 contributors 


Branch: master = New pull request. Create new file Upload files — Find File 
niugao tf KotlinfAppft Fi Latest commit bac2b56 35 minutes ago 
ii idea 完成 Kotlin 版 App 代 码 an hour ago 
图 15-67 
单 击 “Download ZIP” 按 钮 下 载 这 个 项 es IG 
S 0 releases contributors. 
目的 ZIP 包 到 本 地 , 解压 缩 , 用 AndroidStudio 
打开 它 就 行 了 。 这 个 项 目 包 含 了 3 个 Module ER 
(模块 ) ， 如 图 15-69 所 示 。 
Clone with HTTPS © Use SSH | 


app 模块 是 一 个 Android App 程序 。 我 们 
创建 的 Android 工程 默认 只 有 一 个 模块 ， 就 是 
这 种 模块 。app4cotlin 是 手动 添加 的 模块 ， 是 
app 模块 的 Kotlin JU» app 和 app4cotlin 模块 是 
recyclerlisttreeview 库 的 示例 程序 。 

recyclerlisttreeview 模块 是 一 个 Android 库 ， 图 15-68 
就 是 我 们 的 树 控件 库 。 其 下 包含 了 多 种 资源 ， 与 一 个 App 模块 无 异 ， 但 是 它 是 不 能 独立 运行 
的 ， 只 能 被 其 他 App 所 调用 〈 见 图 15-70) o 


Use Git or checkout with SVN using the web URL. 


https://github.com/niugao/RecyclerlistTree | ff 


Open in Desktop 


* y, recyclerlisttreeview 
P B manifests 


|g Ù Android ~ 

EL app 

B recyclerlisttreeview 
Gradle Scripts 


A build.gradle (Project: RecyclerList 
A build.gradle (Module: app) 


B 


了 


| oov 


"s generatedJava 


» 
> 


Fė res 


'aptures 


图 15-69 15-70 


这 个 库 中 有 两 个 Java X, 并 且 没有 从 View 派生 的 类 , 主要 实现 了 一 个 基于 List 的 树 型 集 
RŽ ListTree 以 及 一 个 连接 ListTree 与 RecyclerView 的 适配器 类 ListTreeAdapter. 利用 这 个 库 
显示 树 控件 时 依然 需要 使 用 RecyclerView。 回 忆 一 下 使 用 RecyclerView 的 基本 思路 : 需要 有 
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存放 数据 的 集合 (比如 ArrayList) ， 需 要 派生 一 个 Adapter 类 来 关联 RecyclerView 和 数据 集 
合 。 这 里 的 ListTree 就 是 存放 数据 的 集合 ， 只 不 过 它 是 按 树 的 方式 管理 其 所 包含 的 项 ; 
ListTreeAdapter 是 从 RecyclerView.Adapter 派生 的 一 个 类 ,用 于 将 ListTree 与 RecyclerView 进 
行 关联 。ListTreeAdapter 内 部 有 一 个 ListTreeViewHolder 类 ， 与 RecyclerView.ViewHoler 的 作 
用 没有 什么 两 样 。 

这 个 库 号 称 是 最 快 的 Android 树 控件 库 ， 虽 有 些 夸 张 ， 但 也 是 有 一 定 根据 的 。 因 为 这 个 库 
的 特点 是 以 List 实现 Tree，ListTree 中 保存 各 节点 数据 的 是 List 类 ， 由 于 RecyclerView 要 求 
其 后 台数 据 集合 必须 能 根据 序号 来 提供 数据 (数据 必须 是 有 序 的 ) ， 因 此 底层 的 List 保证 了 
ListTree 与 RecyclerView 的 无 颖 结合， 同时 也 避免 了 树 结构 处 理 中 男人 讨厌 的 递归 算法 问题 。 
这 个 库 还 有 一 个 特点 ， 就 是 保留 了 使 用 RecyclerView 时 的 原 汁 原味 ， 熟 悉 RecyclerView 用 法 
的 话 ， 使 用 这 个 库 是 很 轻松 的 。 

这 是 一 个 真正 的 树 ， 它 能 显示 的 层级 不 仅 是 两 级 ， 只 要 屏幕 够 宽 ， 显 示 多 少 级 都 行 。 这 个 
库 的 使 用 方法 在 app 和 app4cotlin 模块 中 有 示例 。 

下 面 就 利用 它 把 QQ 的 联系 人 界面 实现 出 来 。 

4. 创建 不 同行 的 layout 资源 

联系 人 列表 中 显示 的 行 有 两 种 : 一 种 是 组 ， 另 一 种 是 联系 人 。 它 们 的 Layout 不 同 ， 所 以 
我 们 要 先 创建 两 个 Layout 资源 文件 。 

添加 两 个 Layout 资源 : 一 个 叫 contacts contact item.xml， 对 应 联系 人 ; 一 个 叫 
contacts_group_item.xml， 对 应 组 。 

contacts contact item.xml 的 源码 是 : 


«?xml version-"1.0" encoding="utf-8"?> 
*LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:gravity-"center vertical" 
android:paddingBottom-"A4dp" 
android:paddingTop-"4dp"^ 
«ImageView 
android:id-"84id/imageViewHead" 
android:layout width-"40dp" 
android:layout height-"40dp" 
android:layout marginRight-"10dp" /> 


*LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:orientation-"vertical"^ 


«TextView 


android:id-"8&id/textViewTitle" 
android:layout width-"match parent" 
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android:layout height-"wrap content" 
android:text-"Title" 
android:textSize-"18sp" /> 


«TextView 
android:id-"G*id/textViewDetail" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:text-"Detail" 
android:textSize-"14sp" /> 
«/LinearLayout^ 
«/LinearLayout^ 


contacts group item.xml 的 源码 是 : 


<?xml version-"1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="40dp" 
android:gravity="center_vertical"> 
<TextView 
android:id="@+id/textViewTitle" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:layout_weight="1" 
android:text-"TextView" 
android:textSize-"18sp" /> 


*TextView 

android:id-"Q(4id/textViewCount" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginLeft-"10dp" 
android:text-"0" 
android:textSize-"18sp" /» 

«/LinearLayout^ 


5. 添加 保存 行 数据 的 类 | 


我 的 好 友 

如 果 一 行 中 显示 的 数据 比较 复杂 ， 我 们 应 该 定义 一 个 
类 来 保存 其 数据 。 对 应 “组 ”的 行 显示 如 图 15-71 所 示 。 图 15-71 

看 起 挺 复杂 ， 其 实 真正 需要 我 们 提供 的 数据 就 是 一 个 标题 (“ 我 的 好 友 ”) ， 其 余 的 数据 
从 ListTree 中 就 可 以 获取 到 。 最 左边 的 “ 收 起 /展开 ”图 标 是 内 置 的 ， 昌 然 可 以 定制 ， 但 是 一 
般 不 需要 动 它 。 最 右边 的 “1/2” 表 示 “ 在 线 好 友 数 /总 好 友 数 ”， 总 好 友 数 实际 上 就 是 这 个 行 
的 子 行 数 ， 这 个 可 以 从 TreeList 中 取出 来 。 对 于 组 ,我 们 的 类 只 需 包 含 两 个 字段 即 可 。 这 个 类 
放 在 哪里 呢 ? 放 在 Adapter 类 中 是 比较 合适 的 。 
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在 ContactsPageListAdapter 中 添加 GroupInfo 类 ， 代 码 如 下 : 
/ HEÁRBSUE 


class GroupInfo( 

val title: String , //ÉÍHÉ&BF 

val onlineCount: Int//J/Z/ATEZE/f A 3t 
) 


“组 ”的 子 行 如 图 15-72 所 示 。 Sii IRR 
子 行 中 的 数据 要 更 多 一 点 ， 有 三 项 : 头像 、 名 字 

和 状态 。 图 15-72 
WETT OR AO. 数据 类 作为 Adapter 的 内 部 类 : 
/LIHEABURR A UR 


class ContactInfo( 
val avatar: Bitmap, //Jff 
val name: String, //£f 
val status: String //#Æ 
) 


这 两 个 类 作为 Adapter 类 的 内 部 类 ， 所 以 放 在 ContactsPageListAdapter 中 ， 但 是 我 们 需要 
对 ContactsPageListAdapter 进行 一 下 改造 。 


6. 使 用 RecyclerListTreeView 库 


现在 我 们 就 利用 RecyclerListView 来 实现 “联系 popene 
人 ”页 面 的 双 层 树 结 构 。 首 先 要 添加 对 fli gradle-wrapper.properties (Gradle Version) 


; > É proguard-rules.pro (ProGuard Rules for app) 
RecyclerListView 库 的 依赖 ,打开 App 模块 的 Gradle ffi gradle.properties (Project Properties) 
配置 文件 〈 见 图 15-73) 。 Aù settings.gradle (Project Settings) 

在 文件 中 找到 & dependencies » 代码 块 ， 在 其 中 fli local.properties (SDK Location) 
添加 依赖 项 : 图 15-73 


implementation 'com.edu:recyclerlisttreeview:0.1.5' 


再 同步 一 下 Gradle 或 构建 一 下 工程 ， 就 可 以 使 用 这 个 库 了 。 
改造 ContactsPageListAdapter， 主 要 是 要 把 其 父 类 改 成 ListTreeAdapter， 再 把 一 些 代 码 
删除 : 


class ContactsPageListAdapter (tree: ListTree?) : 
ListTreeAdapter«ListTreeAdapter.ListTreeViewHolder» (tree) { 


// FRARI 


class GroupInfo( 

val title: String , //£HfXB 

val onlineCount: Int//JL f ATEf6f Ad 
) 


// FURRA KIE 
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class ContactInfo( 
val avatar: Bitmap, //JX[f& 
val name: String, //£ 
val status: String //#Æ 


} 


然后 实现 ListTreeAdapter 中 的 两 个 抽象 方法 ， 并 创建 两 个 ViewHolder， 分 别 对 应 组 行 和 
联系 人 行 ， 代 码 如 下 : 


class ContactsPageListAdapter (tree: ListTree?) 
ListTreeAdapter«ContactsPageListAdapter.BaseViewHolder» (tree) { 


override fun onCreateNodeView (parent: ViewGroup?, viewType: Int): 
BaseViewHolder { 


} 


override fun onBindNodeViewHolder (viewHoler: BaseViewHolder?, position: 
Int) { 
) 


// FRARI 


class GroupInfo( 

val title: String , //H 8 

val onlineCount: Int//JLZHATEfEffj A 3€ 
) 


/L HEURE AUR 
class ContactInfo( 
val avatar: Bitmap, //J[& 
val name: String, //4F 
val status: String //#Æ 
) 
open inner class BaseViewHolder(itemView: View) 
ListTreeViewHolder(itemView) 
//fl ViewHolder 
internal inner class GroupViewHolder (itemView: View) : BaseViewHolder (itemView) 
// A K ViewHolder 
internal inner class ContactViewHolder(itemView: View) 
BaseViewHolder(itemView) 
} 


注意 ,要 显示 树 型 数据 , 它 必须 从 RecyclerListTreeView 库 中 提供 的 ListTreeAdapter 类 派生 。 
还 要 注意 ViewHolder 类 也 必须 从 ListTreeViewHolder 派生 , 我 们 派生 了 两 个 ViewHolder 25. 5j 
外 , 范 型 参数 “ContactsPageListAdapterBaseViewHolder” 是 自己 派生 的 ViewHolder 的 基 类 。 因 
为 有 两 种 ViewHolder， 用 谁 做 范 型 参数 都 不 合适 ， 所 以 我 们 创建 了 这 个 共同 的 基 类 。 

父 类 ListTreeAdapter 提供 了 两 个 构造 方法 : 
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//Java fC 
public ListTreeAdapter(ListTree tree){ 
this.tree-tree; 


H 


public ListTreeAdapter (ListTree tree,Bitmap expandIcon,Bitmap collapseIcon)(í( 
this.tree-tree; 


this.expandIcon-expandIcon; 
this.collapseIcon-collapseIcon; 


) 


第 一 个 只 有 一 个 参数 “ListTree tree”， 通 过 它 可 以 传 入 外 部 创建 的 数据 集合 ， 这 个 集合 
最 终 保存 到 了 ListTreeAdapter Wil: 另 一 个 有 三 个 参数 ， 除 了 传 入 数据 集合 外 ， 还 可 以 传 入 
两 个 位 图 ， 用 于 定制 “展开 / 收 起 ”图 标 。 

比 RecyclerView.Adapter 还 要 简单 ，ListTreeAdapter 的 子 类 只 需要 实现 两 种 方法 就 能 让 
RecyclerView 显示 数据 。 一 种 是 “onCreateNodeView()”， 它 对 应 RecyclerView.Adapter 的 
onCreateViewHolder( 方 法 ， 在 创建 一 行 的 控件 时 被 调用 ， 在 其 中 做 的 事情 也 一 样 ， 另 一 种 是 

“onBindNodeViewHolder0”， 它 对 应 RecyclerView.Adapter 的 onCreateViewHolder0 方 法 ,其 
所 做 的 事情 也 没什么 不 同 。 至 于 另 一 个 需要 实现 的 方法 getttemCount0， 已 经 不 允许 动 了 。 
所 以 ， 这 个 库 还 是 极 易 上 手 的 。 


7. 在 ViewHolder 类 中 保存 控件 
我 们 再 为 两 个 ViewHolder 类 添加 变量 ， 以 保存 行 中 要 操作 的 控件 ， 代 码 如 下 : 


//[ 绍 ViewHEolader 

internal inner class GroupViewHolder(itemView: View) : BaseViewHolder (itemView) { 
// Bab BIBT 
var textViewTitle: TextView = itemView.findViewById(R.id.textViewTitle) 
1/1 BPE CBE ERR HEIE 
var textViewCount: TextView = itemView.findViewById(R.id.textViewCount) 


) 


// Af K ViewHolder 
internal inner class ContactViewHolder(itemView: View) : 
BaseViewHolder(itemView) { 
LIBE ARUTETE 
var imageViewHead: ImageView = itemView.findViewById (R.id.imageViewHead) 
V1 BPE RE FHE 
var textViewTitle: TextView = itemView.findViewById(R.id.textViewTitle) 
LIAE ÁCARSUEETE 
var textViewDetail: TextView = itemView.findViewById (R.id.textViewDetail) 
} 


注意 ， 这 两 个 类 仅 做 了 一 点 工作 : 在 构造 时 ， 找 到 后 面 要 绑 定 值 的 View， 把 它们 保存 下 
来 ， 以 避免 后 面 每 次 需要 时 都 搜索 一 下 〈findViewById 会 在 树 中 搜索 节点 ， 很 费时 ) 。 
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在 第 14 章 介 绍 RecyclerView 的 使 用 时 ， 我 们 在 ViewHolder 中 并 没有 这 样 做 ， 原 因 是 当 
时 利用 了 “kotlin-android-extensions” 插 件 提供 的 功能 (这 个 插件 默认 会 启动 )， 它 会 自动 为 
资源 中 的 View 创建 字段 ， 比 如 上 面 代 码 块 中 的 “R.id.imageViewHead” 指 向 的 View 会 在 
itemView 中 创建 与 id 同名 的 字段 imageViewHead。 也 就 是 说 ,可 以 用 itemView.imageViewHead 
的 形式 访问 这 个 View, 其 实 就 相当 于 调用 了 “itemView.findViewById(R.id.imageViewHead)”。 
当然 kotlin-android-extensions 还 有 缓存 机 制 ， 所 以 不 会 每 次 访问 imageViewHead 都 引起 
findViewByld 操作 。 


8. 为 树 添加 节点 


RecyclerView 中 要 显示 的 树 形 数据 必须 放 在 ListTree 中 。 

ListTree 绝对 是 树 , 只 不 过 它 的 内 部 使 用 List 保存 树 的 节点 ,但 是 兄弟 节点 之 间 是 有 序 的 ， 
是 按照 添加 的 顺序 排列 的 ， 而 且 子 控件 必然 放 在 父 控件 的 后 面 ， 其 实 就 是 与 “联系 人 ”界面 中 
组 展开 后 看 到 的 样子 一 模 一 样 。 也 可 以 想象 成 一 个 节点 既 在 树 中 也 在 List 中 ， 所 以 ListTree 
提供 了 节点 在 树 中 位 置 与 List 中 位 置 的 映射 方法 。 


(1) 知道 节点 在 List 中 的 位 置 ， 从 List 获取 这 个 节点 (注意 TreeNode 表示 一 个 节点 ) : 
TreeNode getNodeByPlaneIndex(int index) 
(2) 知道 一 个 节点 ， 获 取 节 点 在 List 中 的 位 置 : 


int getNodePlaneIndex (TreeNode node) 


(3) 根据 一 个 节点 在 其 父 节点 中 的 位 置 获 取 其 在 List 中 的 位 置 : 


int getNodePlaneIndexBYIndex (TreeNode parent， int index) 


“plane index” 表 示 List 中 的 位 置 ， 因 为 RecyclerView 易 与 列表 或 数组 结合 ， 所 以 有 了 
“plane index” 就 很 容易 把 一 个 节点 对 应 到 某 一 行 上 。 当 然 ， 这 是 内 部 实现 ， 使 用 者 可 以 不 管 
它 如 何 实现 。 

下 面 我 们 创建 一 棵 树 并 添加 节点 数据 ， 构 建 出 QQ“ 联 系 人 ”页 面 的 数据 集合 。 我 们 在 
MainFragment 中 添加 一 个 私有 方法 ， 专 门 用 于 创建 联系 人 页 面 并 初始 化 它 的 内 容 : 


/ / BTEEJEBIVLIBUR A XUBI, AR IRUA IRURE 

private fun createContactsPage() : View( 
// BJEEBUR A JUI] View 
val v - getLayoutInflater().inflate(R.layout.contacts page layout,null); 
// Ulf (RRD 
val tree - ListTree() 
/LLBIBEPISITI S 
// 008828, HUBER, EIECTUS null 
val groupl- ContactsPageListAdapter.GroupInfo ("特别 关心 ", 0) 
val group2- ContactsPageListAdapter.GroupInfo ("我 的 好 友 ", 1) 
val group3- ContactsPageListAdapter.GroupInfo (" 朋 友 ",0) 
val group4- ContactsPageListAdapter.GroupInfo (" 家 人 ",0) 
val group5- ContactsPageListAdapter.GroupInfo (" 同 学 ",0) 


298 


EXE 模仿 QQ App 界面 


/ BUM RUE ES E B AREER 

val groupNodel-tree.addNode (null,groupl, -layout.contacts group item) 
val groupNode2-tree.addNode (null,group2, -layout.contacts group item) 
val groupNode3-tree.addNode (null,group3, -layout.contacts group item) 


val groupNode4-tree.addNode (null,group4, -layout.contacts group item) 


Dow 


val groupNode5-tree.addNode (null, group5, .layout.contacts_group item) 

11B, BRAGE 

I8 

var bitmap- BitmapFactory.decodeResource (getResources(), 
R.drawable.contacts normal) 

// 辟 条 人 A 1 

val contactl = ContactsPageListAdapter.ContactInfo (bitmap, 
我 是 王 二 ") 

11X 

bitmap = BitmapFactory.decodeResource (getResources(), 
R.drawable.contacts_normal) 

/ HIR 2 

val contact2- ContactsPageListAdapter.ContactInfo (bitmap, " 王 三 "," [离线 ] 我 
没有 状态 ") 

/ HBIUBEINBUR A. 

tree.addNode (groupNode2,contactl,R.layout.contacts contact item) 

tree.addNode (groupNode2,contact2,R.layout.contacts contact item) 


Ln," [在 线 ] 


/ L EIU EI Recyclerview, JE Él/& Adapter 

val recyclerView :RecyclerView - v.findViewById(R.id.contactListView) 
recyclerView.setLayoutManager (LinearLayoutManager (getContext () ) ) 
recyclerView.setAdapter(ContactsPageListAdapter (tree)) 

return v; 


) 


注意 ，TreeNode 对 象 不 能 通过 构造 方法 创建 ， 只 能 通过 ListTree.addNode( 方 法 创建 。 
addNodeO 的 第 一 个 参数 是 父 节 点 ， 没 有 的 话 就 传 入 null; 第 二 个 参数 是 节点 的 数据 ， 即 每 一 
行 要 显示 的 数据 ;第 三 个 参数 是 这 一 行 的 Layout 资源 ido 

如 此 一 来 ， 原 来 在 MainFragment 的 onCreate0 中 创建 联系 人 页 面 和 设置 它 里 面 的 
RecyclerView 的 代码 就 要 改 一 下 了 ， 由 “注意 粗 体 部 分 ) : 


override fun onCreate(savedInstanceState: Bundle?) { 

super.onCreate (savedInstanceState) 

//&/& —f RecyclerView, HAXE oo LEUR. 00 PURA. oo ZIA 

val vl - RecyclerView(context!!) 

val v2 = layoutInflater.inflate(R.layout.contacts page layout,null) as 
ViewGroup 

val v3 = RecyclerView(context!!); 

listViews[0] = v1 

listViews[1] = v2 
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listViews[2] - v3 


//J RecyclerView € ESAE SS 7 LayoutManager 

/ / ELEUR BT 

(listViews[0] as RecyclerView).let( 
it.adapter = MessagePageListAdapter () 
it.layoutManager = LinearLayoutManager (context) 

) 

/HRUAUT 

val contactListView = listViews[1]!!'.findViewById«RecyclerView» 

(R.id.contactListView) 
contactListView.adapter = ContactsPageListAdapter() 
contactListView.layoutManager - LinearLayoutManager (context) 
) 


改 为 〈 注 意 粗 体 部 分 ) : 


override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 
// fff ^^ Recyclerview, ZMHUDRIM Qo 游 息 页 、 00 KRAH. 09 EMI 
val vl = RecyclerView(context!!) 
val v2 = createContactsPage() 
val v3 - RecyclerView(context!!); 
listViews[0] = vl 
listViews[1] = v2 as ViewGroup 
listViews[2] = v3 


//J9 RecyclerView IE ETATS 5 LayoutManager 

/ HBAUSIT 

(listViews[0] as RecyclerView).let( 
it.adapter = MessagePageListAdapter() 
it.layoutManager - LinearLayoutManager (context) 


} 
9. 实现 Adapter 中 的 方法 


数据 准备 好 了 ， 下 面 实现 Adapter 中 的 方法 ， 把 数据 与 RecyclerView 关联 起 来 。 先 实现 
Adapter 的 onCreateNodeView() 方 法 ， 很 显然 这 个 方法 在 RecyclerView 要 创建 一 行 的 View 时 
override fun onCreateNodeView(parent: ViewGroup?, viewType: Int): 
BaseViewHolder? { 
// &LA Layout JÆ view HIIR 
val inflater = LayoutInflater.from(parent!!.context) 
/ / BIER RIOT View 
when (viewType) { 
R.layout.contacts group item -> { 
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11RA- VEURE true 
val view:View = inflater.inflate (viewType, parent, true) 
return GroupViewHolder (view); 

} 

R.layout.contacts contact item -> { 
val view:View = inflater.inflate(viewType,parent,true) 
return ContactViewHolder (view) 

) 

else -> return null 


) 


跟 RecyclerView 原生 用 法 没有 什么 区 别 。 
然后 就 是 onBindNodeViewHolder0， 代 码 如 下 : 


override fun onBindNodeViewHolder (ViewHolder: BaseViewHolder?, position: Int) ( 
/ HERCTESE 
val view = viewHolder!!.itemView 
/ LG — ír EBURER TON ERIT E 


val node - tree.getNodeByPlaneIndex (position) 


when ( 

node.getLayoutResId() -- R.layout.contacts group item -> ( 
//group node 
val info- node.getData() as GroupInfo 
val gvh - viewHolder as GroupViewHolder 
gvh.textViewTitle.setText (info.title) 
gvh.textViewCount.setText (info.onlineCount.toString()*"/"4 node. 

getChildrenCount ()) 

) 

node.getLayoutResId() 
//child node 


R.layout.contacts contact item -> ( 


val info - node.getData() as ContactInfo QAR 

val cvh = viewHolder as ContactViewHolder | 

cvh.imageViewHead.setlImageBitmap Sk U SAX ùs Sa 
(info.avatar) vežo 0/0. 

cvh.textViewTitle.setText (info.name) V RONE 1/2 

cvh.textViewDetail.setText (info.status) M ns = 


} vi assess 


oo 


} 


o/a 


0/0. 


根据 行 的 序号 获取 节点 用 方法 getNodeByPlaneIndex0， 这 个 
前 面 解释 过 了 。 应 该 注意 的 就 是 获取 行 要 显示 的 数据 ， 调 用 
TreeNode 的 方法 getData0, 还 需要 把 返回 的 对 象 转 成 真正 的 类 型 。 

运行 App， 效 果 如 图 15-74 所 示 。 一 一 s 
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10. 下 拉 刷 新 效果 
下 拉 刷 新 效果 如 图 15-75 到 图 15-77 所 示 。 


ET 


我 的 电脑 2 
© AEERESR, SIfexcHESUDIR 我 的 电脑 
我 的 电脑 i UC, TELANE. 


A Rma PETRER, SERHHHESIA, 


MERSER LIROJE M 


A 15-75 图 15-76 E 15-77 
网 上 有 很 多 实现 了 下 拉 刷 新 的 Android 控件 ， 去 GitHub 上 搜索 “pullrefresh”， 然 后 选择 
Java ( 见 图 15-78) 。 


Repositories I 40 repository results 
Code D 
Commits sot Theaven/PullRefresh 
IOS-st PullRefresh 
lesues " 
Updatec on 9 Mar 2015 
Wikis 2 
Users 
dalong982242260/PullRefresh 
iqq. SUR. AER. BEETH 
Languages 


Updated on 24 Nov 2016 


图 15-78 

很 多 都 是 中 国人 提供 的 ， 使 用 指南 也 是 中 文 的 ， 所 以 我 们 不 再 演示 如 何 使 用 其 中 的 某 个 ， 
这 里 要 演示 的 是 Android 官方 提供 的 控件 SwipeRefreshLayout。 它 在 AndroidX 库 中 ， 其 全 名 
为 “androidx.swiperefreshlayout.widget.SwipeRefreshLayout”。 

它 的 效果 与 QQ App 中 的 效果 不 一 样 。 下 面 简 要 讲 一 下 如 何 使 用 它 。 

原理 很 简单 ， 它 是 一 个 Layout， 但 是 只 能 有 一 个 子 控件 ， 想 让 谁 有 下 拉 刷 新 效果 ， 就 让 
谁 给 它 当 子 控件 。 我 们 现在 需要 为 MainFragment 中 的 三 个 子 页 面 都 提供 下 拉 刷 新 效果 ， 所 以 
我 们 应 该 直接 把 这 三 个 子 页 面 的 容器 viewPager 放 在 SwipeRefreshLayout 中 。 修 改 
fragment main.xml 中 的 代码 : 
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<!--ŻØRA--> 

Xcom.example.niu.qqapp.QQViewPager 
android:id-"Qrid/viewPager" 
android:layout width-"match parent" 
android:layout height-"Odp" 
android:layout weight-"1"/» 

BUR: 

ea-EWEEX-- 

Xandroidx.swiperefreshlayout.widget.SwipeRefreshLayout 

android:layout width-"match parent" 

android:layout height-"Odp" 

android:layout weight="1"> 

Xcom.example.niu.qqapp.QQViewPager 

android:id-"Q(id/viewPager" 
android:layout width-"match parent" 
android:layout height="0dp" 
android:layout weight-"1"/» 

«/androidx.swiperefreshlayout.widget.SwipeRefreshLayout^ 

运行 效果 如 图 15-79 所 示 。 

下 拉 时 ， 出 现 一 个 有 旋转 动画 的 球形 UFO。 但 是 ， 这 个 
UFO 不 会 自动 消失 ， 什 么 时 候 消失 必须 由 我 们 来 决定 。 如 果 
这 个 UFO 消失 了 ， 就 表示 刷新 完成 了 〈 或 成 功 ， 或 失败 ) 。 = s 
所 以 我 们 要 在 UFO 显示 出 来 之 后 开始 数据 刷新 操作 ， 在 刷新 |C Sie N 
完成 后 调用 SwipeRefreshLayout 的 某 个 方法 ， 隐 藏 UFO. CO SR. 

要 操作 SwipeRefreshLayout 控件 ， 就 必须 有 id (设置 为 ”| 一 
refreshLayout) 。 必 须 响应 刷新 事件 ， 开 始 执行 刷新 数据 的 操 
作 ， 代 码 (在 MainFragment 中 ) 如 下 : 15-79 

/LIBBEE HI EHE 

refreshLayout.setOnRefreshListener( 

LHAMTBIBPEEBTIUESE EA, T-REN KRIER GNA, BAE 
VFBRAAHRE 


LIBERO, KAREO 


refreshLayout.isRefreshing = false 


) 

此 时 再 运行 App Fix, Won UFO， 但 很 快 就 消失 了 。 这 是 因为 我 们 直接 在 onRefresh() 
中 调用 了 setRefreshing(false)。 这 在 大 多 数 情 况 下 是 不 对 的 ， 应 该 在 刷新 数据 的 线程 中 异步 调 
用 此 方法 。 多 线程 与 异步 调用 ， 在 后 面 讲 网 络 通信 时 再 讲 ， 这 里 主要 演示 刷新 控件 的 用 法 。 


15.3.12 ”创建 “动态 ”页 
“动态 ”页 如 图 15-80 所 示 。 
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限于 篇 幅 ， 只 讲 一 下 设计 思想 ， 大 家 可 自行 实现 。 这 个 页 面 
看 起 来 也 是 一 个 列表 , 但 实际 上 由 于 其 内 容 是 静态 的 , 用 列表 反 
而 麻烦 , 最 简单 的 办 法 是 用 ScrollView (或 NestedScrollView) ， 
每 一 行 都 用 CardView 作为 最 外 层 控 件 ， 这 样 可 以 随意 定制 行 间 
的 间隔 效果 。 


15.3.13 ”实现 搜索 功能 


搜索 功能 在 App 中 是 一 个 常见 功能 。 QQ App 实现 了 实时 搜 
索 功能 , 运行 方式 是 在 搜索 控件 上 单 击 即 可 开启 搜索 界面 ( 见 图 
15-81). 。 还 记得 前 面 讲 过 的 吗 ? 这 个 搜索 控件 是 假 的 ， 仅 用 于 
接收 单 击 事件 ) 。 

进入 搜索 页 面 后 如 图 15-82 所 示 。 这 个 页 面 的 搜索 控件 才 是 
真正 的 搜索 控件 (SearchView) ， 用 鼠标 单 击 之 ， 出 现 软 键盘 ， 
输入 要 搜索 的 字符 串 。 在 输入 的 过 程 中 , 会 实时 显示 出 当前 字符 
串 的 搜索 结果 〈 见 图 15-83) 。 


eceXDHEX 取消 
agm N n 
头像 ”动态 小 说 SS 部 音乐 


Y o A || 
Id ni aum B genir B em ais 


卖 女儿 打 演 女 主播 ^ RIBRHERMÉ 
069 游戏 ;汪东城 公开 恋情 c 涯 惊 全 国 的 假 药 案 ag as 


15-81 图 15-82 图 15-83 
下 面 我 们 就 讲 一 下 搜索 功能 的 实现 过 程 。 
1. 创建 搜索 页 面 


先 理 一 下 思路 : 我 们 需要 响应 假 搜索 控件 的 单 击 事件 ， 显 示 一 个 新 的 Activity。 这 个 
Activity 就 是 执行 搜索 的 界面 , 里 面 有 一 个 SearchView 控件 , 它 的 下 面 需 被 一 个 列表 控件 占据 。 
这 样 当 在 SearchView 中 进行 搜索 时 ， 可 在 列表 控件 中 显示 结果 。 

我 们 首先 创建 一 个 搜索 页 面 。 这 个 页 面 既 可 以 是 一 个 Fragment， 也 可 以 是 一 个 Activity, 
但 最 好 使 用 Activity， 因 为 根据 QQ App 的 效果 ， 新 页 面 是 全 面 覆 盖 旧 页 面 的。 这 种 效果 用 
Activity 更 方便 一 些 ， 当 然 用 Fragment 也 完全 没 问题 。 

使 用 向 导 创 建 一 个 Activity， 设 置 类 名 为 SearchActivity， 需 选择 的 项 如 图 15-84 所 示 。 
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Creates a newlempty activity 
Activity Name: 

Generate Layout File 
Layout Name: activity search 

Launcher Activity 

Backwards Compatibility (AppCompat) 
Package name: com.example.niu.qqapp is 
Source Language: Kotlin m 
Target Source Set: main M 

图 15-84 


修改 它 的 Layout 资源 文件 activity search.xml 以 设计 界面 ， 最 终 代 码 如 下 : 


<?xml version-"1.0" encoding-"utf-8"?» 
«androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context- 
<SearchView 
android:id="@+id/searchView" 
android:layout_width="0dp" 
android:layout_height="wrap_content" 
android:layout_marginEnd="8dp" 
android:layout_marginStart="8dp" 
android:layout_marginTop="8dp" 
app:layout constraintEnd tostartOf="@+id/tvCancel" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toTopOf-"parent" /» 


".SearchActivity"^ 


«TextView 
android:id-"(*id/tvCancel" 
android:layout width-"wrap content" 
android:layout height="0dp" 
android:layout marginBottom-"8dp" 
android:layout marginEnd-"8dp" 
android:padding-"10dp" 
android:text=" 取 消 " 
android:textColor-"Qandroid:color/ holo blue dark" 
android:textSize-"14sp" 
app:layout constraintBottom toBottomof-"e 4id/searchView" 
app:layout constraintEnd toEndOf-"parent" 
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app:layout constraintTop toTopOf="@+id/searchView" /> 


<androidx.recyclerview.widget.RecyclerView 
android:id="@+id/resultListView" 
android:layout_width="0dp" 
android:layout_height="0dp" 
android:layout_marginBottom="8dp" 
android:layout_marginEnd="8dp" 
android:layout_marginStart="8dp" 
android:layout_marginTop="8dp" 
app:layout constraintBottom toBottomOf-"parent" 


app:layout constraintEnd toEndOf-"parent" 

app:layout constraintStart toStartOf-"parent" 

app:layout constraintTop toBottomof-"Q 4id/searchView" /> 
«/androidx.constraintlayout.widget.ConstraintLayout^ 


其 预览 图 如 图 15-85 所 示 。 


Q 取消 


lem0 
Item 1 
Item 2 
Item 3 
Item 4 
Item 5 
Item 6 
Item 7 
Item 8 
Item 9 


图 15-85 


搜索 控件 的 id 为 “searchView”, 取消 按钮 (其 实 是 一 个 TextView ) 的 id 7j *tvCancel" , 
列表 控件 的 id 为 “resultListView”。 
还 要 为 列表 的 每 一 行 创建 Layout 资源 ， 文 件 名 为 search_result item.xml， 内 容 如 下 : 


<?xml version-"1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:orientation-"horizontal" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:paddingBottom-"2dp" 
android:paddingEnd-"10dp" 
android:paddingStart-"10dp" 
android:paddingTop-"2dp"-^ 
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<ImageView 
android:layout width-"50dp" 
android:layout height-"50dp" 
tools:srcCompat-"G8tools:sample/avatars[8]" 
android:id="@+id/imageViewHead"/> 


<LinearLayout 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:layout marginStart-"10dp" 
android:orientation-"vertical"^ 


«TextView 
android: id="@+id/textViewName" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:layout weight="1" 
android:gravity-"center vertical" 
android:text-"TextView"/» 


«TextView 
android: id="@+id/textViewDetail" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:layout_weight="1" 
android:gravity="center_vertical" 
android: text="TextView"/> 


</LinearLayout> 
</LinearLayout> FEANEN 
LextYiew. 
其 预览 效果 如 图 15-86 所 示 。 
2. Activity 间 共 享 数据 图 15-86 


在 实现 SearchActivity 的 时 候 ， 遇 到 了 一 个 问题 ， 如 何在 Activity 或 Fragment 之 间 共 享 数 
据 。 联系 人 集合 保存 在 ListTree 对 象 中 〈 见 MainFragment 的 方法 createContactsPage()， 其 中 
ListTree 对 象 被 直接 传 给 了 Adapter) ， 而 我 们 在 SearchActivity 中 搜索 联系 人 时 ， 必 然 要 操作 
ListTree 对 象 , 而 ListTree 对 象 是 在 MainFragment 中 创建 并 保管 的 。 那么 如 何 将 ListTree 对 象 
传 给 SearchActivity 呢 ? 

将 ListTree 对 象 保存 成 MainFragment 的 成 员 变量 ,然后 在 SearchActivity 中 获得 
MainFragment 对 象 ,不 就 可 以 访问 ListTree 对 象 了 吗 ? 完全 错误 ! 因 为 在 运行 时 , MainFragment 
属于 MainActivity, 所 以 不 能 在 SearchActivity 中 获得 另 一 个 Activity 中 的 Fragment! 也 不 是 做 
不 到 ， 而 是 不 应 该 ， 因 为 Activity 是 生命 期 独立 的 ， 可 能 SearchActivity 出 现 后 MainActivity 
被 系统 杀 死 了 ，MainActivity 死 后 MainFragment 也 会 很 快 跟着 死 掉 ， 此 时 访问 它 可 能 会 引起 
异常 。 我 们 不 应 该 有 这 种 非 分 之 想 ， 没 把 握 的 事 不 要 去 做 。 
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可 不 可 以 将 ListTree 对 象 设置 成 MainFragment 的 静态 成 员 , 即使 MainFragment 对 象 死 了 ， 
ListTree 对 象 依然 存在 ? 可 以 ,但 这 不 是 Android 希望 的 .Android 希望 数据 与 逻辑 分 离 , Android 
希望 把 整个 App 组件 化 , 即 由 生命 期 独立 的 组 件 互相 配合 完成 整个 App 的 功能 。 需 要 在 Activity 
间 共 享 的 数据 也 应 该 被 组 件 化 ， 这 种 组 件 叫 作 “ContentProvider”! 我 们 把 共享 数据 封装 到 
ContentProvider 中 ， 哪 个 Activity 想 用 它 ， 就 向 ContentProvider 发 出 请 求 。 

在 Android 四 大 组 件 中 ，Activity 和 ContentProvider 的 共同 特点 是 生命 期 独立 ， 甚 至 可 以 
把 一 个 组 件 看 作 是 一 个 独立 的 App， 只 是 功能 少 点 。 但 是 我 不 是 很 看 好 这 种 做 法 。 

最 后 还 有 一 种 做 法 ,就 是 持久 化 ， 即 把 数据 存 到 硬盘 上 (手机 没有 硬盘 ， 对 应 的 就 是 内 部 
存储 或 外 部 存储 ) 进行 共享 ， 既 可 以 保存 成 文件 ， 也 可 以 保存 到 数据 库 中 (SQLite》， 我们 的 
数据 不 多 ， 不 用 这 么 麻烦 。 

最 终 选 择 第 二 种 做 法 ， 即 使 用 静态 成 员 的 方式 在 Activity 间 共 享 数据 。 虽 然 Android 不 乐 
意 采 用 这 种 方式 ， 但 是 它 无 法 阻止 我 们 ， 同 时 这 样 做 也 有 很 多 好 处 。 

把 MainFragment 的 createContactsPage0 中 的 “ListTree tree = new ListTree();” 移 到 
MainFragment 类 中 ， 同 时 增加 一 个 public 方法 getContacts() 来 返回 ListTree XJ $: 


class MainFragment : Fragment() ( 


companion object( 
// B) E (RRD 
private val tree - ListTree() 
fun getContacts() : ListTree (return tree] 


tree 由 临时 变量 变 成 了 类 的 静态 属性 , 成 为 一 个 单 例 ,所 以 最 好 改 一 下 createContactsPageO 
方法 ， 在 为 wee 添加 节点 前 先 判断 一 下 是 不 是 空 的 ， 比 如 : 


if (tree.size() == 0) { // 添 加 节点 } 
3. 使 用 SearchView 


我 们 需要 响应 SearchView 的 某 些 事件 来 完成 搜索 功能 。QQ App 中 可 以 做 到 实时 搜索 ， 
就 是 用 户 在 搜索 框 中 一 旦 输入 新 的 字符 ， 就 立即 使 用 当前 的 字符 串 进行 搜索 。 我 们 利用 
SearchView 可 以 很 容易 实现 这 一 点 : 为 它 设置 侦 听 器 OnQueryTextListener 即 可 。 代 码 如 下 : 

/ILEBEIBEUBAE UA 

private fun initSearching() ( 

11 BEREIT URREA 
searchView.setIconifiedByDefault (false) 
//searchView.setSubmitButtonEnabled (true) 


/LLHBREARE 


resultListView.setLayoutManager (LinearLayoutManager (this)) 
resultListView.setAdapter (ResultListAdapter()); 
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/ BE SearchView REMAR, DUSCHESUHHEERE 
searchView.setOnQueryTextListener(object : SearchView. 
OnQueryTextListener ( 
override fun onQueryTextSubmit(query: String): Boolean ( 
4/2 BE” HIT, BA TERE, IET 
ICE SCIRET, MUER false, RRR BRAHE, 
IL EHURIEAEBI, BRER G hitt A EET 


return false; 


override fun onQueryTextChange (newText: String): Boolean { 
// IE newText "PII APBAUHTIES, IEJUPATHETI TUS 
val tree = MainFragment.getContacts() 
11 URE A AOR SY IR EFI ARUM E AKIR 


searchResultList.clear() 


RAABE FREN, JENAR 
if (!newText.equals("")) { 
// RERE 
var pos = tree.startEnumNode () 
while (pos != null) { 
110R NBE PTF IERRA FL 
val node = tree.getNodeByEnumPos (pos) ; 
if (node.data is ContactsPageListAdapter.ContactInfo) { 
LL EBURUR A MBRR 
val contactInfo - node.getData() as 
ContactsPageListAdapter.ContactInfo 
LLHEBULIUR A HAE 
val groupNode - node.parent 
val groupInfo - groupNode.getData() as 
ContactsPageListAdapter.GroupInfo 
val groupName - groupInfo.title 
/LHEBEGRAIBS THSITUBSUSISIEITIIS 
if (contactInfo.name.contains(newText) || 
contactInfo.status.contains(newText)) ( 
VBT! PIENE A KIE 
searchResultList.add (MyContactInfo(contactInfo, 
groupName)); 


) 


//System.out.println(node.getData().toString()); 
pos = tree.enumNext (pos) ; 


) 


//i8i^ll RecyclerView, RRi 


resultListView.adapter?.notifyDataSetChanged(); 
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return true; 
} 
H) 

) 

这 个 方法 要 放 在 SearchActivity 类 中 ， 我 们 把 设置 搜索 的 相关 代码 都 放 在 其 中 了 。 

注意 ，searchView.setIconifiedByDefault(false) 把 SearchView 设置 成 一 个 非 图 标 模式 ， 显 示 
成 带 有 放大 镜 图 标的 输入 框 ， 如 果 是 图 标 模式 ， 就 会 缩 成 一 个 放大 镜 图 标 。 我 们 在 此 方法 中 先 
取得 各 相关 控件 对 象 ， 保 存 到 变量 中 ， 然 后 为 保存 结果 的 resultListView 设置 了 Adapter 和 布 
局 管理 器 。 又 为 搜索 控件 设置 了 侦 听 器 ， 此 侦 听 器 有 两 个 方法 : 第 一 个 方法 在 用 户 发 出 开始 搜 
索 的 指令 时 执行 ; 第 二 个 方法 在 搜索 文本 发 生 改 变 时 执行 。 我 们 要 进行 实时 搜索 ， 显 然 需 要 实 
现 第 二 个 方法 。 在 这 个 方法 中 , 取得 了 保存 数据 的 集合 对 象 ListTree, 然后 取得 它 内 部 的 列表 。 
节点 信息 其 实 是 保存 在 列表 中 的 ， 取 得 列表 就 是 为 了 方便 地 遍历 所 有 的 节点 。 有 了 这 个 列表 ， 
就 可 以 遍历 每 个 节点 ， 看 谁 保存 的 数据 中 包含 了 要 搜索 的 字符 串 ， 如 果 包 含 了 ， 就 记 下 来 。 如 
何 记 下 来 呢 ? 就 是 保存 到 列表 searchResultList 中 。 当 把 找到 的 联系 人 都 保存 到 searchResultList 
后 ， 调 用 Adapter 的 notifyDataSetChanged0 方 法 通知 重新 加 载 数据 。searchResultList 是 
SearchActivity 的 私有 属性 : 

class SearchActivity : AppCompatActivity() ( 


private val searchResultList - ArrayList«MyContactInfo»() 


YER, searchResultList 中 的 每 一 项 都 是 类 MyContactInfo 的 一 个 实例 。 为 了 保存 联系 人 信 
息 , 我 们 创建 了 类 MyContactInfo 作为 SearchActivity 的 内 部 类 .为 什么 不 直接 用 类 ContactInfo 
We? 因为 它 里 面 没有 组 信息 。MyContactImnfo 中 除了 保存 ContactInfo 外 ， 还 增加 了 保存 组 名 的 
字段 ， 见 代码 : 

LN T ERF EAKAG, CEUK, IR INE MEAKA 


class MyContactInfo(val info: ContactsPageListAdapter.ContactInfo , 
val groupName: String) 


把 这 个 类 作为 SearchActivity 的 内 部 类 。 

我 们 为 显示 结果 的 RecyclerView 设置 了 适配器 ResultListAdapter， 那 么 ResultListAdapter 
是 如 何 实现 呢 ? ResultListAdapter 也 没有 什么 特殊 的 , 无 非 就 是 根据 searchResultList 的 内 容 显 
示 各 行 ， 可 以 把 它 作 为 SearchActivity 的 内 部 类 ， 代 码 如 下 : 


inner class ResultListAdapter(): RecyclerView.Adapter<ResultListAdapter. 
MyViewHolder>(){ 
override fun onCreateViewHolder (parent:ViewGroup, viewType:Int): 
MyViewHolder { 
val v= this8SearchActivity.layoutInflater.inflate(R.layout. 
search result item,parent,false); 
return MyViewHolder (v); 


} 


override fun onBindViewHolder(holder:MyViewHolder, position:Int) { 
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val info = searchResultList.get(position) as MyContactInfo 
holder.imageViewHead.setimageBitmap(info.info.avatar) 
holder.textViewName.setText(info.info.name) 

holder .textViewDetail.setText(" 来 自分 组 "+info .groupName) 


override fun getItemCount () :Int ( 
return searchResultList.size 
) 
inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder 


(itemView) ( 
val imageViewHead - itemView.findViewById(R.id.imageViewHead) as 


ImageView 
valtextViewName -itemView.findViewById(R.id.textViewName) as TextView 


val textViewDetail - itemView.findViewById(R.id.textViewDetail) as 


TextView 
) 
) 


方法 initSearching( M  fE SearchActivity 的 onCreate0 中 调用 : 


override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 
setContentView(R.layout.activity search) 


// ERR 


initSearching() 
) 


最 后 ， 还 要 响应 假 搜 索 控 件 的 单 击 事件 ， 启 动 搜索 Activity 。 假 搜索 控件 是 在 文件 
message list item search.xml 中 定义 的 。 最 外 层 View 的 id 叫 作 searchViewStub， 在 “消息 ” 
和 “联系 人 ”页 面 都 出 现 了 。 我 们 只 演示 一 个 : 响应 “联系 人 ”页 面 的 搜索 。 在 MainFragment 
类 的 createContactsPage0 中 添加 这 一 堆 代码 即 可 : 


private fun createContactsPage() : View( 
ILE BUERERHEIBN BU ETE, IUISBERERUT 
val searchViewStub = v.findViewById«XView» (R.id.searchViewStub) 
searchViewStub.setOnClickListener( 
val intent = Intent(context, SearchActivity::class. java) 
startActivity (intent) 
) 


return v; 


) 
到 此 为 止 ， 实 时 搜索 已 经 完成 。 运 行 App， 在 “联系 人 ”页 面 单 击 靠 顶部 的 搜索 控件 ， 进 
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入 搜索 页 面 ， 在 搜索 控件 中 输入 文本 ， 如 果 有 联系 人 包含 此 
文本 ， 则 出 现 如 图 15-87 所 示 的 效果 。 


4. 如 何 触发 非 实时 搜索 

上 一 节 完 成 了 实时 搜索 功能 ， 为 什么 又 要 讲 如 何 触发 
“ 非 实 时 ”搜索 呢 ? 因为 很 多 时 候 搜索 并 不 是 实时 的 ， 而 是 
普通 方式 ， 即 用 户 先 输入 要 搜索 的 文本 ， 输 入 完成 后 通过 某 
种 方式 使 App 开始 执行 搜索 ， 搜 索 完 成 后 显示 结果 。 这 里 面 
有 一 个 问题 : 如 何 触发 搜索 动作 的 执行 呢 ? 


[m n ETSI 
a x x më 


d 

来 自分 组 我 的 好 友 
下 三 

& 来 自分 组 我 的 好 友 


15-87 


实际 上 一 般 是 通过 软 键盘 上 的 一 个 键 触 发 的 。 当 我 们 在 Search View 中 输入 时 ， 软 键盘 上 
一 般 会 出 现 一 个 “搜索 ” 键 ( 见 图 15-88) 。 万 一 没有 出 现 这 个 键 怎 么 办 呢 ? 可 以 调用 
SearchView 的 实例 方法 setSubmitButtonEnabled0， 如 果 传 入 参数 为 tue， 那 么 这 个 方法 会 在 


SearchView 的 右边 显示 一 个 图 标 〈 见 图 15-89) ， 单 击 它 也 触发 搜索 。 


al 


qiw 


B: 


图 15-88 


BH|9s soo 


alsiditigihljlkil 


eiritiyjulilolp 


[olv binim SN 


图 15-89 


到 此 为 止 ， 搜 索 的 主要 功能 就 实现 了 。 剩 下 的 问题 就 是 单 击 “取消 ”按钮 退出 〈 调 用 
Activity 的 finish0 方 法 ) ， 以 及 单 击 结果 中 的 一 条 后 进入 新 的 页 面 ， 均 可 自行 实现 。 
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< 实现 聊天 界面 > 


原理 分 析 


聊天 页 面 如 图 16-1 所 示 。 

我 们 对 聊天 App 都 很 熟悉 ， 其 实 更 感 兴趣 的 是 它 的 实现 原理 。 
我 们 知道 聊天 App 界面 的 中 间 部 分 〈 即 显示 聊天 信息 的 部 分 ) 是 可 
以 滚动 的 ,可 能 是 某 种 ScrollView 或 ListView( 包 括 RecyclerView). 
实际 上 这 两 种 View 都 可 以 实现 这 个 效果 ， 只 是 用 列表 控件 实现 起 来 
更 容易 ， 因 为 聊天 记录 这 种 数据 保存 在 List 集合 中 比较 便于 管理 。 
另外 一 个 有 意思 的 地 方 就 是 用 气泡 显示 消息 , 我 们 需要 


还 要 计算 消息 文字 所 占 的 高 度 ， 这 样 才能 按 正确 的 大 小 显示 气泡 。 


创建 聊天 Activity 


创建 的 过 程 就 不 细 说 了 ， 类 名 叫 ChatActivity， 对 应 的 Layout Vt 
源 叫 activity chat.xml. 


16.2.1 activity chat.xml 


预览 效果 如 图 16-2 所 示 。 源 码 如 下 : 


<?xml version-"1.0" encoding="utf-8"?> 
<androidx.coordinatorlayout.widget.CoordinatorLayout 


xmlns:android-"http://schemas.android.com/apk/ 
es/android" 


xmlns:app-"http://schemas.android.com/apk/ 
res-auto" 


xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 


实现 气泡 效果 ， 


X emman varte 
ERAS, SEDEM 
DRM! A-BM. Ts 
RPAH, SAE 
ER, mitoso- 


agi mmm n 


图 16-1 
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android:layout height-"match parent" 
android:background-"8color/ chat background" 
tools:context-".MainActivity"^ 


Xcom.google.android.material.appbar.AppBarLayout 
android:layout height-"wrap content" 
android:layout width-"match parent" 
android:theme-"8style/AppTheme.AppBarOverlay"^ 


«androidx.appcompat.widget.Toolbar 
android:id-"G-id/toolbar" 
android:layout width-"match parent" 
android:layout height-"?attr/actionBarSize" 
android:background-"?attr/colorPrimary" 
app:popupTheme-"8style/AppTheme.PopupOverlay"/-^ 


X/com.google.android.material.appbar.AppBarLayout^ 


*LinearLayout 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:layout margin-"6dp" 
android:orientation-"vertical" 
app:layout behavior-" @string/: appbar_scrolling_view_behavior"> 


«androidx.recyclerview.widget.RecyclerView 
android: id-"G(*id/chatMessageListView" 
android:layout width-"match parent" 
android:layout height-"Odp" 
android:layout weight-"1" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toTopOf-"parent" /» 


*LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:gravity-"center vertical" 
android:orientation-"horizontal"^ 


«EditText android:id-"G(*id/editMessage" 
android:layout width-"0dp" 
android:layout height-"match parent" 
android:layout marginRight-"4dp" 
android:layout weight-"i" 
android:background-"8drawable/ unborder round bkground" 
android:ems-"10" 


android:inputType-"textPersonName" /> 


«Button android:id-"G*id/buttonSend" 


android:layout width-"wrap content" 
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android:layout height-"wrap content" 
android:background-"8drawable/ border round bkground" 
android:text-" AXE" /> 

«/LinearLayout» 


*«LinearLayout 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:gravity-"center vertical" 
android:orientation-"horizontal"^ 


«ImageView 
android:id-"G(*id/imageView7" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout weight-"i" 
app:srcCompat-"8android:drawable/ ic menu add" /> 


«ImageView 
android:id-"G(*id/imageView12" 
android:layout width-"O0dp" 
android:layout height-"wrap content" 
android:layout weight-"1" 
app:srcCompat-"Q(android:drawable/ic lock lock" /> 


«ImageView 
android:id-"G(id/imageView8" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout weight="1" 
app:srcCompat-"Gandroid:drawable/btn star big on" /> 


«ImageView 
android:id-"G(*id/imageView10" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout weight="1" 
app:srcCompat-"&android:drawable/btn radio" /> 


«ImageView 
android:id="@+id/imageView9" 
android:layout_width="0dp" 
android:layout_height="wrap_content" 
android:layout_weight="1" 
app:srcCompat="@android:drawable/ic delete" /> 


<ImageView 
android:id="e+id/imageView11" 
android:layout width-"Odp" 
android:layout height-"wrap content" 
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android:layout weight-"i" 
app:srcCompat-"Gandroid:drawable/ic btn speak now" /> 
«/LinearLayout» 
«/LinearLayout» 
«/androidx.coordinatorlayout.widget.CoordinatorLayout^ 


其 中 ， 有 一 个 RecyclerView，id 为 chatMessageListView， 用 来 显示 聊天 消息 。 
"(Qcolor/chat background" 是 res/values/colors xml 中 的 一 个 资源 : 


<color name="chat_background">#ele5e9</color> 


"@style/AppTheme.AppBarOverlay" 和“"@style/AppTheme.PopupOverlay" 是 res/values/ 
tyles.xml 中 的 资源 : 


<style name-"AppTheme.AppBarOverlay" parent-"ThemeOverlay.AppCompat.Dark. 
ActionBar"/» 
<style name-"AppTheme.PopupOverlay" parent-"ThemeOverlay.AppCompat.Light"/^ 


"()drawable/unborder round bkground" j "(?drawable/border round bkground"Jé drawable 
资源 ， 分 别 对 应 border round bkground.xml 文件 和 unborder round bkground.xml X ff. 
border round bkground.xml 的 内 容 为 : 


<?xml version-"1.0" encoding-"utf-8"?» 
<shape xmlns:android-"http://schemas.android.com/apk/res/android"^ 


<!-- JODIE --> 
<solid android:color="#CCCCCC" /> 
<!-- REBRUDITNAUE --> 
«!-- android:radius MWB ¥f2 --> 
<corners android:radius-"5dip" /> 
<stroke 
android:width-"1dip" 
android:color-"4728ea3" /> 
</shape> 


unborder round bkground.xml 的 内 容 为 : 


<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<!-- HEME --> 
<solid android:color="#FFFFFF" /> 
<!-- BERAKOA — 
<!-- android:radius MEMEZ --> 
<corners android:radius-"5dip" /> 
«/shape» 


16.2.2 类 ChatActivity 
下 面 实现 ChatActivity 类 。 需 要 做 的 事项 有 : 为 RecyclerView 创建 Adapter、 创 建 保存 消 
息 数 据 的 类 、 创 建 保 存 消 息 的 ArrayList 等 。 代 码 如 下 : 
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class ChatActivity : AppCompatActivity() { 


/L LHP -RARE 
class ChatMessage(val contactName:String, //ZKAA ET 
val time: Date, //A# 
val content:String, // HAMAR 
val isMe:Boolean) // 2f BLEUE UE C HI fg? 


11 FRA MMR 


private val chatMessages = ArrayList«ChatMessage»() 


override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 
setContentView(R.layout.activity chat) 


// SEIRUESIJE Activity PHÉEBDKEIEEETE. 

/HEBSIBUKJRIBI, BEL ACID EHE EE 

val contactName- intent.getStringExtra("contact name"); 
// RBEISIEF SET 


toolbar.title = contactName 


setSupportActionBar (toolbar); 
11 REBRO E KE IEIR 
supportActionBar?.setDisplayHomeAsUpEnabled (true); 


//J RecyclerView HEEM 
chatMessageListView.layoutManager - LinearLayoutManager (this); 
chatMessageListView.adapter - ChatMessagesAdapter(); 


public override fun onOptionsItemSelected(item : MenuItem) : Boolean ( 
if (item.itemId -- android.R.id.home) ( 
/ LS BÉSERIEE: E ME IPJI AT 
/LLÓGBIELEL, BRIKA 
finish(); 
) 
return super.onOptionsItemSelected (item); 


) 
//J9 RecyclerView IE GIBT ACA 


inner class ChatMessagesAdapter(): RecyclerView.Adapter 
XChatMessagesAdapter.MyViewHolder»() ( 
override fun onCreateViewHolder(parent:ViewGroup, viewType:Int): 
MyViewHolder ( 
// E% viewType MATHI Layout Eig Id, HigetitemviewType () HERA HE 
val itemView = layoutInflater.inflate (viewType, parent, false); 
return MyViewHolder (itemView); 


) 


override fun onBindViewHolder (holder:MyViewHolder, position:Int) { 


val message = chatMessages[position]; 
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holder.textView.setText (message.content); 


} 


override fun getItemCount () : Int( 
return chatMessages.size; 


) 
// ÉWÉÍI Layout, MUEG 


override fun getItemViewType (position:Int):Int( 
val message = chatMessages[position]; 
if(message.isMe) { 
V1 RER, MABT 
return R.layout.chat_message_right_item; 
}else{ 


VIHER, PEBR 


return R.layout.chat_message_left_item; 


j 


inner class MyViewHolder (itemView:View): 
RecyclerView.ViewHolder (itemView)( 
val textView - itemView.findViewById(R.id.textView) as TextView 
val ImageView = itemView.findViewById(R.id.imageView) as ImageView 


} 

注意 ， 其 包含 了 两 个 内 部 类 : ChatMessage 和 ChatMessageAdapter. H, ChatMessage 
用 于 保存 一 条 消息 的 信息 ，ChatMessageAdapter 为 RecyclerView 提供 数据 。 有 意思 的 是 方法 
getItemViewType()， 在 其 中 根据 一 条 消息 是 自己 发 出 的 还 是 对 方 发 出 的 返回 不 同 的 Layout Vt 
源 id 作为 行 View Type。 所 以 ， 还 需要 准备 两 个 Layout 资源 ， 用 于 显示 一 条 消息 。 


16.2.3 ”显示 消息 的 Layout 


创建 两 个 Layout 资源 ， 分 别 命名 为 
chat message left item.xml 和 chat message right item Q 
xml, fH FE RecyclerView 中 显示 一 条 消息 。 
chat message left item.xml 的 预览 效果 如 图 16-3 所 示 ， 
源码 如 下 : 

<?xml version-"1.0" encoding="utf-8"?> 


<LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 


android:layout width-"match parent" 
android:layout height-"wrap content" 
android:layout margin-"8dp"^ 


«ImageView 
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android:id="@+id/imageView" 

android:layout width-"wrap content" 
android:layout height-"wrap content" 
app:srcCompat-"Gdrawable/contacts normal" /> 


«TextView 
android:id-"Q(4id/textView" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
Gdrawable/bubble left" 
android:gravity-"center" 
android:paddingBottom-"10dp" 
android:paddingRight-"10dp" 
android:paddingStart-"40dp" 
android:paddingTop-"10dp" 
android:text-"Message" /» 
«/LinearLayout» 


chat message right item.xml 的 预览 效果 如 图 16-4 所 示 ， 源 码 为 : 


<?xml version-"1.0" encoding-"utf-8"?» 
*LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 


android:background-" 


android:layout width-"match parent" 
android:layout height-"wrap content" 
android:layout margin-"8dp" 
android:gravity-"right"^ 


«XFrameLayout 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout weight-"1"^ 


«TextView 

android: id="@+id/textView" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout gravity-"end" 
android:background-"Gdrawable/bubble right" 
android:gravity-"center" 
android:paddingBottom-"10dp" 
android:paddingEnd-"40dp" 
android:paddingStart-"10dp" 
android:paddingTop-"10dp" 
android:text-"Message" /» 

«/FrameLayout^ 


«ImageView 
android:id="@+id/imageView" 
android:layout_width="wrap_content" 
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android:layout height-"wrap content" 
app:srcCompat-"8drawable/ contacts focus" /> 
</LinearLayout> 


显示 气泡 消息 的 是 一 个 TextView。 它 之 所 以 能 


显示 成 气泡 形状 ， 是 因为 将 一 个 气泡 状 图 像 设 置 成 M 2 
了 它 的 背景 。 为 了 能 让 气泡 在 放大 和 缩小 时 不 失真 ， 


气泡 图 像 应 设 成 9Pitch 图 。 需 要 两 个 气泡 图 像 : 一 
个 是 bubble left.9.png( 见 图 16-5) ; 另 一 个 是 图 16-4 
bubble_right.9.png( 见 图 16-60 。 注 意 其 中 所 指定 

的 能 伸缩 的 部 分 ， 若 指定 对 了 ， 则 在 缩放 时 图 像 就 不 会 失真 了 。 


图 16-5 图 16-6 


16.3 启动 chatActivity 


当 单 击 一 个 联系 人 时 ， 进 入 聊天 界面 ， 所 以 我 们 应 该 响应 联系 人 的 单 击 事件 ， 启 动 
ChatActivity。 

响应 联系 人 的 单 击 事件 应 该 在 联系 人 界面 的 Adapter 类 中 。 打 开 类 ContactsPageListAdapter， 
找到 内 部 类 ContactViewHolder， 修 改 它 的 构造 方法 ， 添 加 对 行 控件 的 单 击 事件 侦 听 ， 代 码 如 
下 注意 init 代码 块 ) : 


// If É ViewHolder 
internal inner class ContactViewHolder(itemView: View) : 
BaseViewHolder(itemView) { 

LIBE RHIZ 
var imageViewHead: ImageView = itemView.findViewById(R.id.imageViewHead) 
// 曼 元 好 友 光 完 扩 大任 
var textViewTitle: TextView = itemView.findViewById(R.id.textViewTitle) 
LIBERA ÁCASHUEETE 


var textViewDetail: TextView = itemView.findViewById (R.id.textViewDetail) 
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init( 

// 24 f zit — Ti, FEDR 

itemView.setOnClickListener( 
LEA BERT 
val intent = Intent(itemView.context, ChatActivity::class. java) 
LIBE THEIREBHEREME XE 
val node = tree.getNodeByPlaneIndex(adapterPosition) 
val info = node.data as ContactInfo 
intent.putExtra ("contact name", info.name) 
itemView.context.startActivity (intent) 


16.2. SIX 


现在 还 没有 实现 网 络 连接 , 不 能 真正 地 聊天 , 但 是 我 们 可 以 模拟 一 下 聊天 ， 即 发 出 一 条 信 
息 后 ， 让 计算 机 自动 回复 一 条 。 

首先 要 响应 ChatActivity 中 的 “发 送 ” 按 钮 ,在 其 中 “发 出 ”一 条 消息 ,之 所 以 在 “发 出 ” 
上 加 引号 ， 是 因为 我 们 不 是 真 的 发 出 去 ， 而 是 显示 在 聊天 界面 的 RecyclerView 中 。 

在 ChatActivity 的 onCreate0 方 法 中 ， 添 加 “发 出 ”按钮 单 击 事件 的 响应 ， 并 把 这 部 分 代 
码 放 在 最 下 面 : 

// 胸 应 授 般 所 红壤， 发 出游 应 


buttonSend.setOnClickListener { 
/ LH NEEXEAINÉE IER UE, T EUXIE chatMessages P, JE zx HK BU RT 
//A EditText TETHRSISE 
val msg - editMessage.getText().toString() 
/ HSInSBEA T, MITRE Recyclerview Ea 
var chatMessage - ChatMessage ("我 ", Date () ， msg, true) 
chatMessages.add (chatMessage); 
11 THEIR iE. REZIDIXERUÉE ETRAS 
chatMessage = ChatMessage (" 对 方 ",Date () , "你 是 谁 ? 你 妈 贵 姓 ?", false) 
chatMessages.add(chatMessage) 
//JE AI RecyclerView, #4 —íT 
chatMessageListView.adapter?.notifyItemRangeInserted (chatMessages.size-2,2) 
// il RecyclerView [A] FR, DUREE 
chatMessageListView.scrollToPosition (chatMessages.size-1) 


) 
运行 App， 进 入 “联系 人 ”页 面 ， 单 击 “ 我 的 好 友 ”， 选 一 个 联系 人 《和 见 图 16-7) ， 进 
入 聊天 页 面 ， 输 入 消息 并 发 出 ， 出 现 图 16-8 中 的 效果 。 
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图 16-7 图 16-8 


到 此 为 止 ， 聊 天 界面 已 经 实现 ,但 是 离 真正 网 络 聊天 还 差 得 远 。 我 们 下 面 应 该 讲 网 络 通信 
了 ， 但 是 网 络 通信 离 不 开 多 线程 ， 因 为 网 络 通信 的 执行 过 程 必须 在 主线 程 之 外 的 线程 中 执行 ， 
所 以 下 面 先 讲 多 线程 再 讲 网 络 通信 。 
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多 线程 是 令 初学 者 非常 头 大 的 一 个 概念 , 尤其 是 将 多 线程 与 同步 、 异 步 这 些 调用 方式 混在 
一 起 讲 时 ， 但 它们 有 时 真 的 分 不 开 。 

作为 一 名 程序 设计 从 业 人 员 ， 必 须知 道 多 线程 是 怎么 回 事 。 

先 声明 一 点 ， 这 里 不 会 讲 太 细 ，,， 只 讲 原理 和 概念 ， 理 解 以 后 读者 自己 可 以 去 查找 资料 学 习 
细节 。 


线程 与 进程 的 概念 


程序 在 硬盘 中 是 一 个 可 执行 文件 。 执 行 这 个 文件 时 ， 它 会 被 加 载 到 内 存 中 ， 此 时 就 有 了 一 
个 进程 。 
一 个 可 执行 文件 可 以 被 运行 多 次 , 所 以 一 个 程序 是 可 以 对 应 多 个 进程 的 。 虽然 这 些 进程 都 
是 由 同一 个 程序 产生 的 , 但 是 它们 之 间 却 没 有 什么 关系 。 这 个 没有 关系 指 的 是 内 存 空 间 (不 是 
真 的 内 存 ， 是 一 个 逻辑 概念 ) 。 每 个 进程 都 有 自己 的 内 存 空 间 ， 一 个 进程 不 可 能 访问 另 一 个 进 
程 中 的 变量 ， 更 不 可 能 调用 另 一 个 进程 中 的 函数 。 进 程 就 像 关 在 全 面 封闭 无 门 无 窗 的 牢房 里 ， 
根本 不 允许 互相 之 间 直 接 对 话 。 
如 何 做 到 让 每 个 进程 都 有 独立 的 内 存 空 间 呢 ? 不 论 计算 机 的 物理 内 存 是 多 少 ，32 位 的 进 
程 总 是 感觉 自己 有 4G (2 的 32 次 方 ) 的 内 存 可 以 使 用 。 这 其 实 是 操作 系统 虚拟 出 来 的 内 存 空 
间 ， 是 操作 系统 欺骗 了 进程 。 
程序 要 运行 ， 仅 有 进程 不 行 ， 还 必须 有 线程 ! 如 果 没 有 线程 ， 程 序 只 是 被 加 载 到 内 存 中 ， 
不 能 运行 ! 也 就 是 说 ， 程 序 里 的 代码 不 能 被 CPU 执行 ! 
为 了 能 执行 程序 , 操作 系统 在 创建 完 进程 后 会 默认 创建 出 一 个 线程 并 开始 执行 , 这 个 线程 
叫 主线 程 。 线 程 必须 从 某 个 函数 开始 执行 ， 也 就 是 它 的 入 口 函数 。 很 显然 ， 主 线程 的 入 口 函数 
是 “main0”! 所 以 ， 要 创建 一 个 线程 ， 必 须 为 它 指定 一 个 入 口 函数 〈 在 Java 中 也 叫 方法 ) 。 
注意 , 除了 主线 程 外 ， 其余 线 程 都 是 主线 程 直 接 或 间接 创建 出 来 的 。“ 间 接 ” 指 的 是 由 主线 程 
创建 的 线程 再 创建 线程 的 方式 。 实际 上 除了 创建 者 不 同 , 线程 之 间 没 有 任何 区 别 , 也 就 是 主线 
程 特殊 一 点 主线 程 结束 时 ， 程 序 就 会 结束 ， 未 执行 完 的 其 他 线程 会 被 强制 杀 死 。 
线程 的 入 口 函 数 返 回 时 ,线程 就 会 正常 结束 ,有 时 线程 非 正常 结束 ,往往 会 造成 内 存 泄漏 。 
进程 之 间 不 能 互相 直接 访问 , 进程 内 应 该 可 以 互相 直接 访问 了 吧 ? 完全 正确 ! 大 家 都 在 一 
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间 屋 里 ,当然 可 以 看 到 彼此 。 进 程 内 的 线程 可 以 访问 同一 进程 内 其 他 线程 中 创建 的 变量 , 虽然 
有 时 语法 上 不 允许 〈 比如 不 能 访问 别人 的 私有 变量 ) ， 但 是 可 以 绕 过 语法 限制 。 
线程 到 底 是 什么 呢 ? 可 以 把 一 个 线程 认为 是 一 个 虚拟 的 CPU。 如 果 把 两 个 函数 都 分 配给 
同一 个 CPU 执行 ， 那 么 这 两 个 函数 会 根据 其 调用 顺序 依次 执行 ， 一 个 执行 完了 ， 才 执行 下 一 
个 ， 这 就 叫 “ 同 步 执行 〈 或 同步 调用 ) ”。 我 们 编写 的 大 多 数 代码 都 是 同步 执行 的 。 如 果 把 两 
个 函数 分 配给 两 个 CPU 执行 ， 那 么 这 两 个 函数 就 可 以 同时 执行 ， 不 必 等 待 一 个 执行 完了 再 执 
行 下 一 个 ， 这 叫 异 步 执 行 〈 或 异步 调用 ) 。 同 步 执行 并 不 是 同时 执行 ， 反 而 异步 执行 才 有 同时 
执行 的 可 能 性 。 把 两 个 函数 分 配给 两 个 CPU 执行 ， 就 需要 通过 创建 线程 的 方式 来 实现 。 

我 们 很 容易 想到 : 单线 程 必然 对 应 同步 执行 , 因为 在 单线 程 中 函数 必然 根据 其 调用 顺序 依 
次 执行 ， 同 理 ， 多 线程 对 应 的 必然 是 异步 执行 ， 因 为 多 个 线程 之 间 无 法 做 到 同步 执行 。 错 了 1! 
单线 程 也 可 以 做 到 异步 执行 ， 多 线程 也 可 以 做 到 同步 执行 。 我 们 后 面 会 详细 讲解 其 中 的 原理 。 
下 面 我 们 先 创建 一 个 线程 。 


17.2 创建 线程 


我 们 创建 一 个 新 项 目 ， 专 门 用 于 测试 线程 ， 命 名 为 ThreadDemo。 在 项 目 创建 向 导 中 ， 选 
择 “Empty Activity”、Kotlin 语言 ， 并 选中 “AndroidX Support”。 

完成 后 , 我 们 在 Activity 的 界面 中 添加 两 个 按钮 ( 见 图 17-1) ，id 分 别 为 “buttonShowTip 
(显示 提示 ) ”和 “buttonStartThread〔 创 建 线程 》”。 在 onCreate0 中 响应 “显示 提示 ”按钮 
的 单 击 事件 ， 显 示 提示 : 

LHBBHIEIER BUE 

buttonShowTip.setOnClickListener ( 

v -> Snackbar.make (v,，" 我 显示 了 表示 界面 没 死 掉 "， Snackbar.LENGTH LONG).show() 

) 

当 单 击 “显示 提示 ”按钮 时 ， 出 现 如 图 17-2 所 | camem uma 
示 的 现象 。 

再 响应 “创建 线程 ”按钮 的 单 击 事件 


buttonStartThread.setOnClickListener ( 


图 17-1 


/LLHBUBIUFEBIIIETE, ARAE ELEEIEEEFEBE EET RI 
try { 

Thread.sleep (20000) 
) catch (e: InterruptedException) ( 


e.printStackTrace() 
) 图 17-2 


注意 ， 现 在 并 没有 开启 线程 ， 而 是 让 当前 线程 〈 界 面 线程 ) 睡 了 20 P» (20000 毫秒 ) 。 
为 界面 的 操作 (包括 事件 响应 ) 都 是 在 界面 线程 中 执行 的 ， 所 以 这 里 让 界面 线程 sleep 时 ， 


SH 
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界面 就 成 为 假死 状态 ， 再 点 哪个 按钮 都 没有 反应 。 在 Android 7.0 上 测试 ， 停 止 反 应 一 段 时 间 
后 ， 系 统 会 直接 把 这 个 App 干掉 ， 因 为 Android 系统 能 检测 到 界面 长 时 间 无 反应 的 App。 
因为 对 界面 的 处 理 都 是 在 界面 线程 中 发 生 ， 所 以 当 某 一 步 进行 大 量 运算 或 直接 长 时 间 
sleep 时 ， 后 序 的 代码 就 不 能 执行 ， 所 以 界面 就 变 得 没 反 应 (假死 )。 这 一 切 在 使 用 多 线程 后 
将 迎 丸 而 解 。 下 面 把 “创建 线程 ”按钮 的 响应 代码 改 为 创建 新 线程 : 
buttonStartThread.setOnClickListener ( 
11 I8 — NEEEEIEREEISIE: 


MyThread().start() 
) 


现在 改 成 创建 一 个 线程 类 CMyThread) 的 实例 ， 然 后 调用 这 个 线程 的 start0 方 法 以 启动 线 
程 。 注 意 ， 若 不 调用 线程 的 start0) 方 法 ， 则 线程 不 会 执行 。onClick0 是 在 界面 线程 中 调用 的 ， 
所 以 是 在 界面 线程 中 启动 了 新 线程 ， 但 是 新 线程 启动 后 其 代码 就 不 在 界面 线程 中 执行 了 。 
MyThread 类 是 什么 呢 ? 下 面 是 其 定义 〈 把 它 作为 Activity 的 内 部 类 ) : 
internal inner class MyThread : Thread() { 
override fun run() ( 
11B EZRA ODE 
try { 
Thread.sleep (20000) 
} catch (e: InterruptedException) { 


e.printStackTrace() 


) 


) 


它 从 Thread 派生 ， 重 写 了 Thread 类 的 run0 方 法 。run0) 就 是 线程 的 入 口 方法 ， 在 线程 启动 
后 执行 。 我 们 依然 睡 了 20 秒 ， 但 是 这 次 还 会 向 上 次 那样 无 反应 吗 ? 试 一 下 ， 界 面 不 假死 了 。 
为 什么 ”因为 不 是 界面 线程 睡 了 ， 所 以 界面 就 不 会 无 响应 。 

Android 规定 ， 耗 时 的 操作 必须 在 界面 线程 之 外 的 线程 中 执行 ， 尤 其 是 网 络 操作 ! 因为 网 
络 操作 动不动 就 会 像 sleep 一 样 让 线程 阻塞 10 秒 、20 秒 的 。 

在 Android 中 ， 界 面 线程 就 是 主线 程 ! 


了 .本 创建 线程 的 另 一 种 方式 


直接 上 代码 : 


buttonStartThread.setOnClickListener ( 
/ / ÉL — NEEEEXER ERSTE 
val thread - Thread(Runnable ( 
/ HEBEDBZEFEILA OZE 
try { 
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Log.i("me", "sleep") 
Thread.sleep (20000) 
) catch (e: InterruptedException) ( 
e.printStackTrace() 
) 
»n 
thread.start() 
) 


与 第 一 种 方式 大 同 小 异 ， 就 是 把 入 口 方法 封装 在 一 个 Runnable 对 象 中 。“Runnable” 代 
表 一 个 可 以 执行 的 对 象 ， 就 是 用 于 封装 一 段 代码 的 。 它 只 定义 了 一 个 方法 ran0， 所 以 是 一 个 
函数 接口 : 

GFunctionalInterface 

public interface Runnable ( 


void run(); 


) 


很 显然 ， 代 码 就 放 在 run0 中 。 用 Runnable 的 好 处 是 代码 写 起 来 省 事 很 多 。 

这 里 要 和 弄 清 几 个 概念 , 也 就 是 大 家 的 一 些 习 惯 叫 法 。 界面 所 在 的 线程 一 般 都 是 主线 程 (在 
Android 中 肯定 是 主线 程 ), 所 以 我 们 喜欢 把 “主线 程 ” 和 “界面 线程 ” 混 着 叫 , 有 时 也 叫 “UI 
线程 ”, 因为 界面 就 是 “User Interface (UD ”的 缩写 。 主线 程 中 创建 的 新 线程 是 “ 子 线程 ”。 
又 由 于 界面 是 能 被 看 到 的 , 所 以 “界面 线程 ”又 叫 “ 前 台 线 程 ”, 子 线程 又 叫 “ 后 台 线 程 ”或 
“工作 线程 ”。 所 以 主线 程 、 界 面 线程 、UI 线程 、 前 台 线 程 都 是 指 主线 程 ， 而 后 台 线程 、 子 
线程 、 工 作 线程 都 是 指 主线 程 之 外 的 线程 。 


17.5 多 个 线程 操作 同一 个 对 象 


假设 我 们 编写 一 个 游戏 , 用 一 个 类 Player 来 保存 玩家 信息 ,包括 玩家 名 字 、 性 别 、 等 级 、 
生命 值 、 魔 法 值 、 攻 击 、 防 御 、 服 装 、 发 型 、 图 像 等 。 伪 代码 如 下 : 


class Player( 
private String name; 
private boolean sex; //[Í£A/ 
private Object image; ///E/ff 
private int level; // 侍 级 
private int clothes; ///KÍf 
private int attack; //Jfir 
private int defence; // ji 
private int hairdo; //ĘÆ 
private int health; ///Efffá 
private int magic; ///A 
11B 。。 
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再 假设 游戏 中 提供 了 一 个 功能 : 玩家 可 以 随时 去 某 个 地 点 花 钱 改变 性 别 。 在 改变 性 别 的 过 
程 中 ， 不 是 仅 设置 一 个 sex 就 行 了 ， 而 是 需要 设置 Player 的 多 个 属性 ， 因 为 随 着 性 别 的 改变 ， 
可 能 服装 、 发 型 、 人 物 图 像 等 都 要 跟着 变 ， 但 这 些 属 性 在 代码 中 只 能 一 个 接 一 个 去 改变 。 游 戏 
一 般 都 会 开 多 个 线程 。 如 果 一 个 线程 A 正在 改变 玩家 的 性 别 ， 代 码 大 致 如 下 : 


val player = Player() 
/LHEEBIS 


if (requestChangeSex() === true) ( 

//388 

player.sex - !player.sex 

if (player.sex --- true) ( 
V1 ERAH 
player.clothes = 10 
player.image = Any() 
player.hairdo = 1100 
Iann 


此 时 另 一 个 线程 B 在 读 取 这 个 玩家 的 信息 并 把 它 显示 出 来 ， 代 码 大 致 如 下 : 
/L HERE RE 

I. 

/ HG PIER 

Player player = getPlayer(playerId); 


if(player!-null)( 
// BIR 

} 

巧 的 是 ，A 线程 对 相关 的 属性 才 改变 了 一 半 就 被 这 个 线程 B 把 Player (玩家 ) 对 象 读 了 出 
来 , 那么 此 时 显示 出 来 的 玩家 可 能 是 一 个 长 着 一 寸 多 长 护 胸 毛 的 女 的 , 也 可 能 是 一 个 留 着 白 娘 
子 头饰 的 男 的 ， 这 就 很 尴 软 了 。 

如 何 避 免 这 种 情况 出 现 呢 ?” 只 要 能 保证 玩家 信息 在 操作 完成 后 才能 被 读 取 即 可 。 也 就 是 说 ， 
在 一 个 线程 中 设置 玩家 信息 时 ， 要 阻止 其 他 线程 访问 这 个 玩家 的 信息 ， 即 保证 操作 的 “原子 
性 ”。 如 何 保证 一 堆 操作 的 原子 性 能 呢 ? 上 锁 ! 这 种 锁 不 是 一 般 的 锁 ， 无 色 无 味 ， 锁 代码 于 无 
形 中 。 上 此 锁 之 后 , 一块 数据 在 一 个 线程 中 被 操作 时 ， 其 余 线 程 不 能 操作 这 块 数据 ， 如 果 要 操 
作 ， 只 能 等 待 那 个 线程 完成 操作 ， 形 成 同步 执行 的 效果 。 所 以 ， 这 种 锁 叫 “同步 锁 ”! 
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如 果 把 一 个 线程 想象 成 一 条 公路 , 那么 两 个 线程 就 是 两 条 公路 , 每 条 公路 上 的 车 依次 行驶 ( 单 
行道 )， 两 条 公路 之 间 不 存在 行车 干扰 的 问题 。 同 步 锁 就 像 两 条 公路 汇合 且 变 窄 的 地 方 ， 过 了 这 
个 汇合 区 依然 是 两 条 公路 ， 但 这 个 汇合 区 只 有 一 辆 车 的 宽度 ， 所 以 两 条 路 上 的 车 得 一 辆 跟着 一 辆 
通过 (不 能 并 排 通行 》。 注 意 ， 通 过 之 后 每 辆 车 还 是 走 自己 的 路 ， 不 会 串 到 另 一 条 路 上 去 。 

下 面 我 们 就 为 上 面 的 两 段 代码 加 锁 。 但 是 ， 要 加 锁 得 先 创建 锁 。 因 为 可 能 要 在 多 个 类 中 使 用 
这 把 锁 ， 所 以 在 某 个 类 中 用 一 个 公开 静态 常量 保存 : 

val lock = ReentrantLock() 

加 锁 后 的 代码 如 下 。 

线程 A: 

LEES 


if (requestChangeSex() --- true) ( 

VIZE 

lock.lock() 

player.sex - !player.sex 

if (player.sex --- true) ( 
/ LECCE 
player.clothes - 10 
player.image - Any() 
player.hairdo - 1100 
If... 


lock.unlock() 
) else { 
If... 
} 
线程 B: 
/ HERE 
Iss 
lock.lock(); 
Player player = getPlayer(playerId); 
lock.unlock(); 
if(player!-null) ( 
11 BARRE 


} 
lockO 是 上 锁 ，unlockO 是 开锁 。 注 意 ， 只 有 A 线程 上 锁 、B 不 上 锁 的 话 ， 锁 不 起 作用 。 要 
想 让 锁 起 作用 ， 两 个 线程 都 要 上 锁 ， 当 然 它们 还 必须 使 用 同一 把 锁 。 
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执行 过 程 是 这 样 的 ， 假 设 线程 A 先 执 行 lock0， 因 为 此 时 没有 其 他 线程 调用 lock0， 所 以 
不 用 等 待 ， 继 续 执行 ， 假 设 在 A 执行 到 unlock0 之 前 ,线程 B 执行 到 了 lock0， 由 于 此 时 已 经 
有 A 执行 了 lock0， 那 么 B 就 停 在 lock0 这 人 句 进 行 等 待 ， 直到 A 中 执行 了 unlock0，B 才能 继 
续 执 行 。 反 过 来 B 先进 入 锁 也 一 样 。 这 是 不 是 保证 了 变性 过 程 的 原子 性 ? 

还 要 注意 的 就 是 要 锁 住 的 代码 范围 如 何 界 定 。 虽然 锁 的 是 代码 , 但 是 实际 上 要 保护 的 是 数 
据 ， 所 以 锁 住 的 代码 越 少 越 好 ， 仅 能 保护 该 保护 的 数据 就 可 以 。 按 照 这 个 原则 ,仔细 体会 一 下 
上 述 代码 的 加 锁 位 置 。 

一 种 更 简单 的 锁 是 synchronized， 用 起 来 更 方便 一 些 ， 但 它 与 Lock 的 作用 原理 没什么 
别 ， 实 际 上 它 就 是 基于 Lock 的 。 还 有 其 他 很 多 与 多 线程 同步 相关 的 对 象 和 概念 ， 我 们 就 不 讨 
论 了 ， 这 里 主要 是 理解 多 线程 同步 的 概念 。 

总 之 ， 这 种 锁 叫 同步 锁 ， 通 过 它 可 以 对 多 个 线程 共同 访问 的 某 个 块 数据 进行 同步 保护 。 


区 


了 .与 ”单线 程 中 异步 执行 


多 线程 之 间 是 异步 执行 , 而 在 单线 程 中 永远 不 可 能 出 现 两 个 函数 同时 执行 的 可 能 性 , 那么 
单线 程 中 就 只 有 同步 执行 而 没有 异步 执行 了 吧 ? 错 ! 这 个 世界 是 如 此 复杂 ,不 合理 的 事情 很 多 ， 
比如 在 同一 个 线程 中 完全 可 以 写 出 异步 执行 的 代码 ! 

虽然 单线 程 中 不 可 能 做 到 同时 调用 两 个 函数 (方法 ) ,但 是 可 以 做 到 调用 完 第 一 个 后 以 不 
明显 的 方式 调用 第 二 个 , 或 不 确定 在 之 后 的 什么 时 间 调 用 第 二 个 。 一 个 很 有 代表 性 的 例子 就 是 
事件 侦 听 器 。 事 件 侦 听 器 是 一 个 类 ,其 实 它 的 真正 目的 是 封装 事件 的 响应 方法 。 在 设置 事件 侦 
听 器 后 ， 并 不 是 紧 接 着 就 执行 侦 听 器 中 的 方法 ， 而 是 在 事件 发 生 时 才 会 调用 。 可 以 确定 的 是 设 
置 侦 听 器 的 方法 和 事件 响应 方法 的 调用 绝对 都 是 在 主线 程 中 , 但 是 它们 却 是 异步 执行 的 。 比 如 
下 面 这 段 代码 : 

buttonShowTip.setOnClickListener ( 

v -> Snackbar.make (v,，" 我 显示 了 表示 界面 没 死 掉 "，Snackbar .LENGTH LONG) .show() 


) 


setOnClickListener0 完 成 之 后 并 不 会 紧 接 着 调用 Snackbarmake0， 而 是 只 有 在 产生 单 击 事 
件 发 生 后 才 执 行 ， 怎 么 产生 单 击 事件 呢 ? 单 击 buttonLogin 按钮 。 

至 于 这 是 怎么 做 到 的 ， 大 体 说 一 下 : 界面 线程 都 会 由 一 个 循环 构成 ,我 们 就 把 它 叫 作 大 循 
环 ， 线 程 还 带 有 一 个 事件 列表 〈 其 实 是 队列 ， 想 象 成 列表 更 容易 理解 ) ， 系 统 产生 的 事件 首先 
放 到 事件 列表 中 进行 排队 , 这 个 大 循环 每 循环 一 次 就 从 列表 中 取出 一 个 事件 进行 处 理 , 在 处 理 
过 程 中 可 能 会 添加 新 的 事件 侦 听 器 。 处 理事 件 的 方式 就 是 调用 事件 对 应 的 侦 听 器 中 的 方法 ,处 
理 完 后 把 事件 从 列表 中 删 掉 。 因 为 在 某 一 时 刻 添 加 的 侦 听 器 ， 只 有 等 到 对 应 的 事件 产生 了 , 才 
会 在 某 次 循环 中 被 调用 ， 所 以 侦 听 器 中 方法 的 调用 时 刻 是 未 知 的 。 

既然 单线 程 中 可 以 做 到 异步 执行 ， 那 多 线程 之 间 可 不 可 以 做 到 同步 执行 呢 ? 详 见 下 节 。 
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1 了 .6 多 线程 间 同步 执行 


同步 执行 其 实 就 是 依次 执行 ,一 个 方法 返回 后 再 执行 下 一 个 。 使 用 多 个 线程 , 完全 可 以 设 
计 出 同步 执行 的 效果 。 比 如 有 两 个 方法 FAQ 和 BO 41135 8 1E FAO 后 面 调用 fB0， 这 在 一 个 
线程 中 易如反掌 ， 只 需 这 样 编写 : 


fAQ; 

fB(); 

假设 从 0 执行 2 秒 、 旬 0 执行 3 秒 , 那么 此 时 这 两 个 的 执行 时 间 是 243-5 秒 。 使 用 多 线程 时 ， 
我 们 可 以 这 样 做 : 创建 新 线程 ， 在 其 中 执行 AO， 启动 这 个 线程 ， 然 后 执行 人 0。 代 码 如 下 : 

val thread = Thread(Runnable ( fA() )) 

thread.start() 

fB() 

假设 创建 并 启动 线程 需要 1 P». MEA TE 1 秒 之 后 AOM fB0 会 同时 开始 执行 。 由 于 fB0 
需 执行 3 秒 , fAO 只 执行 2 秒 , 那么 fAO 会 提前 完成 , 因此 FAQR fB0 的 执行 持续 时 间 就 是 fBO 
的 执行 时 间 ， 当 然 还 应 该 加 上 创建 线程 的 那 1 秒 。 也 就 是 说 使 用 多 线程 之 后 ,两 个 方法 的 执行 
时 间 为 3+1， 比 单线 程 中 少 用 了 1 秒 。 当 然 我 们 这 里 不 是 说 多 线程 节省 时 间 的 问题 ， 而 是 要 说 
明 如 何在 使 用 多 线程 时 保证 BOE 从 0 返回 后 执行 的 问题 。 我们 如 果 能 让 fB0 等 待 AO 执行 完 
毕 再 执行 , 是 不 是 就 达到 目的 了 ? 这 个 还 真 不 难 , 因为 操作 系统 提供 了 线程 之 问 互相 等 待 的 函 
数 ,Java 中 也 提供 了 这 样 的 方法 : Thread 的 实例 方法 join0。 只 需 在 thread.start0 之 后 调用 join0)， 
就 会 等 待 thread 对 象 所 代表 的 线程 结束 后 再 执行 她 0， 代 码 如 下 : 

val thread = Thread(Runnable ( fA() )) 

thread.start() 


thread.join(); 
£B() 


注意 ， 是 当前 线程 〈 也 就 是 fB0 所 在 的 线程 》 等 待 thread! 

当然 这 段 代码 看 起 来 完全 是 自 找 麻烦 , 因为 这 种 场景 下 根本 没有 必要 使 用 多 线程 , 但 是 这 
只 是 证 明 多 线程 之 间 真 的 可 以 同步 执行 ,其 实 多 个 线程 之 间 可 以 使 用 “信号 ”实现 真正 的 同步 
执行 ， 就 是 说 不 用 一 个 线程 等 待 另 一 个 结束 ， 通 过 互相 发 送信 号 就 可 以 做 到 在 线程 B 中 执行 
fB0 之 前 先 等 待 线程 A 中 的 fAO 执 行 完 成 。 


17.7 在 其 他 线程 中 操作 界面 


创建 一 个 线程 是 如 此 简单 , 而 且 同 步 和 异步 执行 的 概念 也 不 是 那么 难 理解 ,下 面 就 讲 一 下 
线程 在 Android 开发 中 如 何 使 用 。 
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在 实际 开发 过 程 中 , 我 们 常常 要 在 后 台 线程 中 操作 控件 , 比如 我 们 在 后 台 线 程 中 发 出 网 络 
请 求 ， 取 得 了 一 个 头像 ， 然 后 需要 把 头像 设置 给 某 个 ImageView 控件 显示 ， 由 于 在 同一 个 进 
程 内 ， 因 此 在 任何 线程 中 都 完全 可 以 获取 控件 对 象 ， 然 后 操作 它 ， 但 是 不 能 这 样 操作 ! 记 住 一 
个 原则 : 绝 不 要 在 界面 线程 之 外 的 线程 中 操作 界面 组 件 ! 也 就 是 说 ， 只 能 在 界面 线程 中 操作 
界面 ! 这 个 原则 就 像 禁止 兄妹 结婚 这 条 人 伦 规范 一 样 ， 若 真 的 要 无 视 它 ， 也 可 以 ， 但 是 后 果 很 
严重 ! 

在 后 台 线 程 中 得 到 的 图 像 如 何 设置 到 ImageView 中 呢 ? 其 实 也 不 难 ， 我 们 可 以 把 设置 图 
像 的 代码 “ 扔 ”到 UI 线程 中 执行 ! 

为 什么 可 以 向 UI 线程 中 “ 扔 ”代码 呢 ? 前 面 讲 了 ，UI 线程 由 一 个 大 循环 构成 ， 并 且 有 一 
个 事件 队列 。 如 果 把 事件 队列 扩展 一 下 ， 让 它 除 了 能 保存 事件 ， 还 能 保存 一 段 一 段 的 代码 ， 那 
么 后 台 线程 向 UL 线程 “ 扔 ”代码 实际 上 就 是 把 这 段 代码 加 到 其 事件 队列 中 进行 排队 ， 在 未 来 
某 次 循环 中 就 会 执行 这 些 代码 。 在 后 台 线程 中 ， 把 一 段 代码 “ 扔 ”给 UI 线程 后 ， 会 继续 执行 
后 面 的 代码 ， 而 不 必 等 待 这 段 被 “ 扔 ”的 方法 执行 完成 。 

当然 在 Kotlin 中 不 能 直接 “ 扔 ”一 个 段 代码 给 某 个 线程 ， 只 能 “ 扔 ”一 个 对 象 ， 所 以 这 
段 代 码 应 该 以 Runnable XE Lambda 包装 一 下 。“ 扔 ”代码 需 使 用 一 个 叫 作 Handler 的 类 ， 下 
面 详细 讲 一 下 。 

Handler 


这 里 讲 的 Handler 是 包 android.os 中 的 类 ， 其 他 包 中 也 有 叫 Handler 的 类 ， 注 意 区 分 。 

要 使 用 它 , 需 先 创建 它 的 实例 , 因为 只 有 有 具有 大 循环 和 消息 队列 的 线程 才能 接受 “ 扔 ”过 
来 的 方法 ， 所 以 创建 Handler 实例 时 需 关 联 目标 线程 的 大 循环 ， 代 码 如 下 : 

// BIEESUPI, BREER 


val handler = Handler (Looper.getMainLooper()) 


关联 之 后 就 可 以 扔 了 ， 代 码 如 下 : 


1/1 ARRE RŽ -NIE 
handler .post (Runnable { 
E ETATE EEEE A 


n 


可 以 看 到 ,用 post0 方 法 扔 了 一 个 Runnable 过 去 ， 扔 过 去 的 代码 是 异步 执行 的 ， 也 就 是 在 
本 线程 中 扔 完 就 不 管 了 ， 反 正 后 面 某 个 时 刻 会 在 目标 线程 中 执行 。 

实际 上 Handler 提供 了 多 个 以 “post” 开 头 的 方法 用 于 扔 代码 ， 有 的 方法 可 以 提供 更 多 的 
控制 ， 如 图 17-3 所 示 。 

根据 方法 名 就 能 看 出 各 自 的 作用 ， 比 如 postAtFrontOfQueue0 表 示 放 到 队列 的 最 前 面 ， 可 
以 尽快 执行 扔 过 去 的 代码 ，postAtTime0O 可 以 指定 执行 开始 的 绝对 时 间 ，postDelayed0 指 定 执 
行 开始 的 相对 延迟 时 间 等 。 
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handler.post .post(Runnable { 


f» post [...] ï Boolean 
» postAtFrontOfQueue(r: Runnable!) Boolean 
"* > postAtFrontOfQueue {...} i Boolean 
> postAtTime(r: Runnable!, uptimeMillis: Long) Boolean 
^w * postatTime(r: (() -> unit)!, uptimemillis: Lon. Boolean 


> postAtTime(r: Runnable!, token: Any!, uptimeMi.. Boolean 
^w > postAtTime(r: (() -> Unit)!, token: Any!, upti. Boolean 
> postDelayed (r: Runnable!, delayMillis: Long) Boolean 
(() -> Unit)!, delayMillis: Lon. Boolean 


图 17-3 


有 时 我 们 希望 给 目标 线程 发 消息 来 触发 不 同 的 处 理 , 因为 这 样 就 不 用 每 次 都 发 送 一 堆 代码 
了 ， 于 是 Handler 提供 了 另外 一 种 包装 代码 的 方法 : Callback 类 。 看 下 面 的 代码 : 


// UIEE SEP, BERE EZEFEBACÓBTR. 
val handler = Handler(Looper.getMainLooper(), object : Handler.Callback { 
override fun handleMessage (msg: Message): Boolean ( 
when (msg.what) ( 
MSG 1 -> ( 
// 处 理 游 廊 了 
) 
MSG 2 -> ( 
V/B 2 
) 
MSG 3 -> ( 
/ LABEL 3 
) 
MSG 4 -> ( 
11E a 
) 
) 


return false 


n 


1/110 EHEREE FERE — INE 

handler.sendEmptyMessage (MSG 1) 

代码 被 封装 到 Handler.Callback "P, Handler.Callback 的 派生 类 只 需 实现 一 个 方法 
handleMessage0， 根 据 传 入 的 Message 对 象 进行 不 同 的 处 理 。 现 在 扔 的 已 不 是 代码 (代码 已 经 
被 关联 到 目标 线程 》， 而 是 消息 。 如 果 要 发 送 的 消息 不 带 参数 ， 可 以 使 用 sendEmptyMessage 
只 发 送 消息 编号 ， 如 果 带 有 参数 ， 则 要 创建 一 个 Message 实例 ， 把 参数 放 到 这 个 Message 中 ， 
然后 调用 方法 sendMessage0 发 送 它 。 

能 不 能 在 主线 程 中 利用 handler 向 自己 扔 代 吗 呢 ? 当然 没 问题 ! 

还 有 ,我 们 自己 创建 的 线程 能 不 能 像 主线 程 一 样 带 有 大 循环 和 消息 队列 呢 ? 能 , 详 看 下 节 ! 
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1 7. 8 HandlerThread 


很 显然 HandlerThread 代表 一 种 线程 。 它 与 Thread 类 的 不 同 有 三 点 : 


COD 它 内 部 已 经 实现 了 线程 方法 ， 所 以 不 需 我 们 重 写 run0 方 法 或 传 入 一 个 Runnable。 
(2) 它 的 线程 方法 中 实现 了 大 循环 ， 并 且 具 有 一 个 消息 队列 。 
(3) 类 名 不 一 样 。 


它 的 用 法 很 简单 :创建 对 象 ， 然 后 启动 ， 一 个 线程 就 开始 运行 了 ， 代 码 如 下 : 

val th = HandlerThread ("ht1") 

th.start() 

其 构造 方法 有 一 个 String 参数 ,用 于 为 这 个 线程 指定 一 个 名 字 。 线程 启动 后 ， 就 会 执行 大 
循环 ,我 们 似乎 也 没有 指明 要 做 什么 , 那么 这 个 大 循环 不 是 在 空转 吗 ? 这 不 白白 耗费 CPU 吗 ? 
不 会 的 ， 如 果 消 息 队列 中 没有 消息 ， 这 个 线程 就 会 暂停 ,直到 进来 消息 之 后 再 继续 执行 。 下 面 
我 们 让 这 个 线程 做 点 事 , PR UI 线程 一 样 ， 把 一 段 代 码 扔 给 它 就 行 ， 扔 代码 依然 使 用 Handler, 
代码 如 下 : 


val th = HandlerThread("ht1") 
th.start() 


val handler = Handler (th.getLooper()) 

LB FARRER NIE 

handler.post(Runnable ( 

E ETE ETEA 

n 

与 向 主线 程 扔 代码 唯一 不 同 的 就 是 获取 Looper 的 方式 变 了 , 这 里 获取 的 是 HandlerThread 
的 Looper。 

当然 也 可 以 使 用 扔 消息 的 方式 在 HandlerThread 中 执行 代码 (使 用 Handler.Callback) 。 

了 解 了 多 线程 的 重要 概念 后 ， 就 可 以 读 懂 后 面 网 络 通信 的 内 容 了 。 对 于 多 线程 的 实践 , 我 
们 将 结合 网 络 通信 部 分 一 起 讲 。 


17.9 线程 的 退出 


线程 的 退出 是 容易 被 大 家 忽略 掉 的 , 但 其 实 这 很 重要 。 新 线程 肯定 是 在 某 个 Activity 中 创 
建 的 , 那么 这 个 Activity 在 销毁 时 就 应 该 把 这 个 线程 停止 掉 ! 不 停 掉 行 吗 ? 根据 实际 情况 来 讲 ， 
一 般 也 过 不 到 问题 ， 只 要 Activity 所 在 的 进程 存在 ， 那 么 线程 就 可 以 继续 运行 。 那 进程 什么 时 
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候 死 呢 ? 当 运 行 在 这 个 进程 中 的 所 有 组 件 〈 包 括 Activity, Service 等 ) 都 被 销毁 时 ， 这 个 进程 
才 “ 有 可 能 ”会 死 , 之 所 以 说 “有 可 能 ”， 主 要 与 内 存 有 关 : 如 果 系 统 内 存 不 够 用 ， 进 程 就 会 
被 杀 死 ， 如 果 够 用 ， 一 般 就 不 会 死 。 

由 于 当前 内 存 越 来 越 大 ， 所 以 死 的 可 能 性 越 来 越 小 ,如果 不 主动 停 掉 线程 ， 线 程 就 会 继续 
活着 。 这 里 面 还 有 个 问题 ， 线 程 可 能 在 Activity 销毁 后 执行 了 访问 UI 的 代码 ， 此 时 UI 不 存在 
了 ， 肯 定 会 引起 骨 泪 ， 所 以 不 论 实 际 情况 如 何 ， 都 应 在 Activity 销毁 时 停止 在 Activity 中 所 开 
启 的 线程 。 

如 何 终止 一 个 线程 呢 ? 我 们 首先 想到 的 可 能 是 停止 线程 代码 ， 如 果 线 程 的 run() 方 法 返回 
了 ， 那 么 线程 就 自然 结束 了 ， 这 是 线程 最 舒服 的 死 法 ， 自 然 死 亡 , 一 切 都 很 和 谐 ,线程 会 处 理 
好 后 事 〈 比 如 释放 内 存 、 关 闭 网 络 连接 等 ) 。 还 可 以 在 其 他 线程 中 谋杀 一 个 线程 ， 比 如 调用 要 
杀 死 线程 的 stop0 方 法 ,也 可 以 调用 它 的 interrupt0 方 法 ， 这 两 者 有 所 区 别 ， 但 是 都 会 造成 线程 
的 非 正常 死亡 ， 所 以 这 两 种 方法 是 不 推荐 使 用 的 。 

其 实 ， 我 们 只 有 一 种 方法 可 选 : 让 线程 自然 死亡 ! 严谨 来 说 应 该 是 让 线程 尽快 自然 死亡 。 
为 什么 说 “尽快 ” 呢 ? 因为 很 多 时 候 做 不 到 让 线程 “立即 ”死亡 。 

如 何 让 一 个 线程 快速 自然 死亡 呢 ? 研究 一 下 线程 的 代码 , 其 执行 耗 时 是 多 少 。 这 还 得 分 有 
循环 和 无 循环 的 情况 ， 如 果 无 循环 , 就 要 研究 一 下 这 个 线程 执行 的 总 时 间 ， 如 果 它 每 次 执行 都 
能 保证 在 一 两 秒 内 完成 ， 就 不 需要 对 这 个 线程 做 任何 处 理 ， 因 为 它 死 得 很 快 ， 虽 然 一 两 秒 对 
CPU 是 很 长 的 时 间 ， 但 对 我 们 来 说 很 短 。 如 果 它 耗 时 比较 长 的 时 间 ， 比 如 30 秒 ， 那 么 对 我 们 
来 说 就 会 比较 长 , 此 时 要 仔细 研究 一 下 哪 几 条 代码 比较 耗 时 , 有 什么 办 法 可 让 这 些 耗 时 的 操作 
被 中 断 ， 只 有 从 耗 时 的 操作 中 跳出 来 才能 继续 往 下 执行 ， 快 速 结束 。 

举 个 例子 ， 比 如 线程 B 中 有 一 步 是 阻塞 式 的 网 络 连接 ， 这 种 操作 有 时 非常 耗 时 ， 那 么 在 
线程 A 中 要 尽快 停止 线程 B 时 就 应 该 考虑 调用 一 些 打 断 网 络 连 接 过 程 的 方法 ， 让 线程 B 中 的 
网 络 连接 过 程 中 断 掉 ， 但 是 可 能 在 线程 A 中 调用 打 断 方法 时 ， 线 程 B 中 网 络 连接 这 一 步 已 经 
完成 了 。 即 使 这 样 ， 线 程 A 中 的 调用 也 是 必要 的 ， 因 为 我 们 无 法 预测 线程 B 中 的 网 络 连 接 到 
底 何 时 开始 执行 、 何 时 完成 。 其 实 最 好 的 方式 是 把 阻塞 式 网 络 调用 改 为 非 阻塞 式 ， 这 样 就 有 办 
法 做 到 快速 结束 B 线程 。 

在 有 循环 的 情况 下 ， 可 以 在 另外 一 个 线程 中 改变 循环 所 检测 的 条 件 变量 的 值 〈 比 如 true 
改 为 false)， 这 样 就 能 让 循环 很 快 退出 。 循 环 退出 了 ， 线 程 就 会 很 快 结束 。 还 得 研究 一 下 每 次 
循环 的 代码 中 有 没有 耗 时 的 操作 。 如 果 有 ， 除 了 改变 循环 条 件 变量 外 ,也 得 考虑 如 何 打 破 耗 时 
的 操作 。 其 实 最 好 的 办 法 还 是 尽量 别 有 耗 时 的 操作 ， 把 阻塞 式 调用 改 为 非 阻塞 式 。 

注意 , 必须 在 Activity 的 onDestroy0 中 等 待 线 程 的 结束 , 以 保证 线程 退出 后 才 销 毁 Activity。 
如 何等 待 一 个 线程 结束 呢 ? 很 简单 , 调用 Thread 的 实例 方法 join0 即 可 , 比如 A 线程 要 等 待 B 
线程 退出 ， 则 在 A 线程 中 调用 B 的 join0 方 法 ,一 旦 调用 了 这 个 方法 ， 那 么 A 就 暂停 运行 ， 
直到 B 结束 才 继 续 运行 。 

下 面 就 在 我 们 的 MainActivity 中 加 入 等 待 线程 结束 的 代码 。 

为 了 在 onDestroy0 中 访问 所 创建 的 线程 对 象 , 需要 先 把 线程 变量 改 为 MainActivity 的 成 员 
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class MainActivity : AppCompatActivity() { 
var thread:Thread? null 


override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 


setContentView(R.layout.activity main) 


LLLBLBEAE S TE HUE 
buttonShowTip.setOnClickListener ( 
v -> Snackbar.make (v，" 我 显示 了 表示 界面 没 死 掉 "， 
Snackbar.LENGTH LONG).show() 
} 


buttonStartThread.setOnClickListener ( 
/ / 0g — EEBEEIREBRIE 
thread = Thread(Runnable( 
/ LABEESEREIILA ELE 
try { 
Log.i("me", "sleep") 
Thread.sleep (20000) 
) catch (e: InterruptedException) ( 
e.printStackTrace() 


n 
thread?.start() 


) 


override fun onDestroy() ( 

// SBEEEBEEIB HI 

try ( 
thread?.join() 

) catch (e: InterruptedException) ( 
e.printStackTrace() 

) 

super.onDestroy () // ZZ W/E — FXII — à 


) 


如 果 调 用 join0 时 thread 已 经 结束 了 ， 会 发 生 什 么 呢 ? 什么 也 不 会 发 生 ，join0 也 不 会 引起 
所 在 线程 〈 这 里 是 主线 程 ) 暂停 。 
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网 络 通信 是 Android 开发 中 的 重要 技术 点 。 一 个 新 手 只 要 学 会 了 网 络 通信 和 了 RecyclerView， 
就 可 以 信心 满 满 地 去 软件 公司 打工 了 ， 其 他 的 技术 点 可 以 边 做 边 学 。 

要 进行 网 络 开发 ， 必 须 具备 网 络 通信 的 基础 知识 ， 其 实 也 不 需要 太 多 , 一 点 就 够 用 了 。 下 
面 我 们 先 讲 一 下 网 络 基础 知识 。 


15.1. 网 络 基础 知识 


18.1.1 IP 地 址 与 域名 


把 一 台 设 备 加 入 到 网 络 中 , 它 就 能 自动 访问 网 络 上 的 资源 , 也 能 让 其 他 网 络 中 的 设备 访问 
到 这 台 设 备 。 这 是 怎么 做 到 的 呢 ? 

互联 网 是 一 个 开放 的 系统 ， 它 有 一 套 协议 ， 当 各 设备 都 遵守 这 套 协议 时 ， 它 们 就 能 发 现 对 
方 并 彼此 连接 。 互 联网 中 设备 这 么 多 , 必须 有 一 个 编号 方案 。 为 每 台 设 备 设置 一 个 唯一 的 编号 ， 
才能 区 分 各 设备 ， 这 个 编号 就 是 P 地址 。IP 地 址 用 类 似 “61.135.169.111” 的 形式 表示 ， 但 实 
际 上 它 是 一 个 整数 ， 只 不 过 为 了 某 些 原因 表示 成 这 样 。 要 访问 网 络 上 的 一 台 计 算 机 时 ， 必 须 指 
定 它 的 IP 地 址 。 有 时 我 们 看 到 的 不 是 IP 地 址 ， 比 如 要 访问 GitHub 网 站 的 主页 ， 输 入 的 地 址 
如 图 18-1 所 示 。 


< > Œ EB $G http//github.com 


图 18-1 


这 种 地 址 叫 URL， 由 两 部 分 组 成 : “http:/” 表 示 协 议 ， 其 中 “http” 是 协议 名 ， 
“github.com” 是 域名 ， 指 向 要 访问 的 服务 器 。 这 不 是 P 地 址 ， 而 是 域名 。 域 名 其 实 是 他 地 
址 的 别名 ， 因 为 IP 地 址 对 我 们 来 说 不 好 记 ， 所 以 就 为 卫 地 址 取 了 个 别名 ， 便 于 记忆 。 当 一 台 
设备 不 知道 域名 对 应 的 IP 地 址 时 ， 就 找 域名 服务 器 询问 一 下 ， 得 到 IP 地 址 后 ， 以 IP 地 址 建 
立 网 络 连接 。 
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18.1.2. TCP 5 UDP 


网 络 是 由 一 个 个 设备 与 设备 间 的 连接 组 成 的 ， 当 两 个 设备 通信 时 ， 限 于 硬件 的 能 力 以 及 其 他 
原因 ， 数 据 必 须 分 成 一 小 块 一 小 块 地 进行 传送 。 多 小 呢 ? 不 超过 1500 字 节 ! 如 果 传送 1M 字 节 ， 
那么 它 其 实 被 底层 API 分 割 成 了 多 个 小 块 ， 而 这 些小 块 在 传送 过 程 中 要 经 过 多 个 设备 才能 到 达 目 
标 设备 ， 由 于 是 一 张 网 ， 每 个 小 块 所 经 过 的 路 径 可 能 各 不 相同 ， 因 此 无 法 保证 先 发 的 小 块 一 定 比 
后 发 的 小 块 更 早 到 达 目 标 设备 ， 这 就 需要 对 方 收 到 之 后 再 对 小 块 进行 排序 。 甚 至 有 可 能 某 个 小 块 
走 和 于 了， 根本 到 不 了 目标 设备 ， 那 就 需要 重 发 这 个 小 块 。 还 有 可 能 是 发 送 端 设 备 运行 快 、 接 收 端 
设备 运行 慢 ， 对 发 来 的 数据 来 不 及 收 ， 需 要 两 边 进行 同步 …… 有 很 多 问题 需要 解决 。 

TCP 和 UDP 是 网 络 传输 协议 ， 是 用 于 保证 数据 传输 的 。 上 述 那些 问题 ，TCP 都 帮忙 解决 
了 ， 而 UDP 基本 上 都 没有 解决 。 所 以 要 保证 数据 被 对 方 收 到 ， 两 者 之 间 应 建立 TCP 连接 。 
UDP 也 有 它 的 用 武之 地 ， 因 为 有 些 时 候 是 允许 丢失 数据 的 ， 比 如 视频 聊天 ， 双 方 要 传送 音 视 
频数 据 , 保证 音 视频 的 实时 性 比 保证 完整 性 更 重要 ,所 以 允许 丢掉 部 分 数据 ,数据 丢失 时 就 会 
出 现 马赛 克 。 

Android 提供 了 利用 TCP/UDP 进行 网 络 通信 的 API， 利 用 这 些 API 编写 代码 也 被 称 为 Socket 
编程 。 


18.1.3 HTTP 协议 


HTTP 是 超 文本 传输 协议 ， 主 要 用 于 传输 文本 〈 超 文本 还 是 文本 ) ， 但 后 来 也 能 传输 二 进 
制 数据 了 。 它 可 以 传输 任何 格式 的 文本 ， 当 然 主 要 是 传输 HTML 格式 ， 也 就 是 网 页 。 由 于 网 
页 是 不 能 有 数据 丢失 的 ， 因 此 HTTP 建立 在 TCP 之 上 。 实 际 上 HTTP 并 不 能 传输 数据 ， 它 只 
是 规定 了 数据 打包 的 结构 ， 数 据 包 利 用 TCP 进行 传输 ， 所 以 它 是 建立 在 传输 层 之 上 的 ， 是 应 
用 层 协议 。 

HTTP 包 结 构 由 包头 和 身体 两 部 分 组 成 ， 包 里 的 文本 数据 都 是 key-value 的 形式 ， 计 算 机 
能 处 理 ， 我 们 也 能 看 懂 。 细 节 我 们 就 不 多 说 了 ， 网 上 有 太 多 关于 它 的 介绍 。 

Android 提供 了 利用 HTTP 进行 网 络 通信 的 API, 我 们 习惯 把 它们 直接 叫 作 网 络 通信 API 
相对 于 它们 来 说 ，Socket API 是 底层 API，HTTP API 建立 在 Socket API 之 上 。 

浏览 器 访问 服务 端的 一 个 网 页 ， 是 通过 一 次 HTTP 请 求 完 成 的 。 其 过 程 是 这 样 的 : 


(1) 用 户 在 浏览 器 的 地 址 栏 输入 网 页 地 址 (如 http://github.com) ， 浏 览 器 向 服务 器 发 出 
TCP 连接 请 求 ， 与 服务 端 建立 连接 。 

(2) 浏览 器 将 网 页 地 址 和 其 他 参数 打 到 一 个 HTTP 包 中 ， 将 这 个 包 发 给 Web 服务 器 。 

G) 服务 器 收 到 之 后 ， 根 据 网 页 地 址 中 的 路 径 和 参数 决定 为 浏览 器 返回 哪个 网 页 。 

(4) 服务 器 将 网 页 内 容 (HTML XE) 打 成 HITP 包 发 给 浏览 器 。 

(5) 浏览 器 收 到 回应 包 后 ， 取 出 其 中 的 HTML 文本 ， 解 析 后 显示 出 网 页 。 

(6) 浏览 器 关闭 连接 。 

每 请 求 一 个 网 页 , 浏览 器 总 是 执行 “建立 连接 一 传送 数据 一 关闭 连接 ”的 过 程 , 每 次 请 求 
之 间 互 不 相关 ,所 以 HTTP 请 求 是 无 状态 的 , 要 想 使 对 同一 个 服务 器 的 多 次 请 求 之 间 产 生 关联 ， 


337 


Android 10 Kotlin 编程 通俗 演义 


需要 服务 器 提供 额外 的 支持 , 比如 Session 对 象 .这 属于 Web 开发 的 概念 ,在 此 不 做 深入 讨论 。 


18.2 Android HTTP 通信 


HTTP 协议 不 仅仅 用 于 传输 HTML. 文本， 而 是 可 以 传输 任何 文本 ， 而 且 前 面 说 过 ， 它 还 
可 以 传输 二 进 制 数据 。 

我 们 可 以 使 用 Java 中 提供 的 HTTP 通 信 API 直 接 访 问 Web 服务 器 , 获取 网 页 并 显示 出 来 ， 
这 需要 用 到 控件 WebView 来 显示 网 页 。 

下 面 我 们 就 用 一 个 小 例子 〈 依 然 利用 前 面 创建 的 项 目 ThreadDemo? 让 Android 显示 网 页 。 

在 访问 网 络 之 前 ， 有 项 工作 必须 做 : 声明 网 络 访问 权限 。 很 简单 ， 在 Manifest 文件 中 加 
入 一 条 <uses-permission> 元 素 : 

<?xml version-"1.0" encoding="utf-8"?> 


«manifest xmlns:android-"http://schemas.android.com/apk/res/android" 
package-"com.example.niu.threaddemo"-^ 


*uses-permission android:name-"android.permission.INTERNET" /> 


«application 


TE MainActivity 的 Layout 中 增加 一 个 新 的 按钮 ， 取 名 “访问 网 页 ”，id 为 
“buttonWebPage”， 响 应 这 个 按钮 ， 在 其 中 创建 线程 ， 在 线程 中 访问 一 个 网 页 ， 并 保存 得 到 
的 HTML 文本 。 代 码 如 下 : 


this.buttonWebPage.setOnClickListener ( 
11 EIERE, AA 
Thread (Runnable{ 
try { 

val urlObj = URL ("https://cn.bing.com") 
val connection = urlObj.openConnection() as HttpURLConnection 
IIITER, 1X  PEUIBETEM FERT 
connection.connect() 
val ins - connection.getInputStream() 


VIFM, UFRR 
val buffer = ByteArray (4096) 
val stringBuffer = StringBuffer () 
var ret = ins.read (buffer) 
11ER, SEC IEHLTBEH 4096 FË, EMP StringBuffer 办 
while (ret >= 0) { 

ILE MBRR Ee BIER 

if (ret » 0) ( 

// BUSIRA HRK HTML XO, Hi UIRE RIFE 


val html = String(buffer, 0, ret) 
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/L BST 
Log.i("html", html) 
stringBuffer.append (html) 


ret = ins.read(buffer) 


H 
} catch (e: IOException) { 
e.printStackTrace () 


) 
)).start() 


) 


为 什么 要 在 线程 中 访问 网 页 ?还 记得 前 面 讲 的 禁忌 吗 ? 

代码 并 不 难 理解 ， 主 要 做 了 两 件 事 : 一 是 连接 服务 器 ， 二 是 从 服务 器 读 取 数据 。 

连接 过 程 是 这 样 的 : 先 创建 一 个 URL 对 象 , 利用 URL 对 象 获 取 连 接 对 象 (connection ) ， 
调用 connection 的 connect() 方 法 连接 服务 器 ， 连 接 成 功 之 后 利用 输入 流 从 服务 器 读 入 数据 。 

读 取 数 据 的 过 程 主要 是 一 个 循环 ， 我 们 不 知道 到 底 能 读 取 多 少数 据 ， 所 以 开 了 一 个 4096 
字 节 的 缓存 ， 每 次 最 多 读 入 4096 字 节 ， 直 到 不 再 有 数据 可 读 ， 跳 出 循环 。 为 了 看 到 读 到 的 数 
据 ， 在 循环 中 用 Log 输出 它们 。 运 行 App， 单 击 “ 访 问 网 页 ”按钮 ， 之 后 在 日 志 窗口 中 可 以 
看 到 读 出 的 数据 ， 是 一 段 HTML 代码 〈 注 意 ， 测 试 设备 必须 能 上 网 ) ， 如 图 18-2 所 示 。 


[ent Tangz"zh7 Xm ang zh xmIns-" IEC/ 7n MOTB/ T9837 ans TWeb-"hEtp:77 schen: 
si ST-new Date 

"| ipt»escript type-"text/javascript"»//«! [CDATA[ 

0:050; G«(ST: (si ST?si ST:new Date) kt: "zh-CN" ,RTL false, Ver: "19" , 1G: "F98947C7FFD744ABAF 
/1]]><7script><style type-"text/css"»z(a:1)body.hp[backgrou ;color:sfff ;margin: 0; fon! 
dght:32px;width:s2px;position:absolute)scoreLayer smheader{width: 100%; padding:0;background 
aRptTmvtbYlu6T&wrOdbq3nr8ROsfDSuOPF5SvNUyHnaGYL Tk2 fy z4yd1219f175360bor7752P0320pb 4 6EHThOI 
as. icon(background-image:url(data:image/png;basec4 , iVBORwoKGEOAAAANSUNEUBAAABOAAAAdCAMAAAB 
tLyLGwcT4iNiQTHnnpDBAhDOQDN+BRX4DknwsKemF1TSFHB]bSE3t1HAACKC jubYAi Gc j8f PTya7kSOOYTHEHZPF7T| 
var and, define,require; (function(n)(function e(n,i,u)(t[n]] | (t[n]-{dependenci 
e-function(n)[return d.getElementById(n)), qs-function(n,t)(return t-typeof 
lement:n.relatedrarget)function sj mo(n)(return sb iallevent.totlement:n. 
move" ,"touchnove" ,"scrol1", "keydown" "resi ze" ] ;n.wireup(t, (10ad:f , compute; null unload:e])] 
perf; (function(n)[function f(n){return i.hasownProperty(n)?i[n]:n)function e(m)(var t-"5^; 


fire,n.onbeforef ire-function()[t&&t() ju() ;n-mark(r, i))): (tsi PP, 
11]]></script><title> 微 软 sing WR - 国内 版 </title><meta http-equ: 
Var sj b- d.body; G.AppVer-"B 1 2 6199207"; var H-(); H.mkt = 
1/]]>x/scriptyca id-"miamburger" class-"b hphb b hide" tabindex- 


9" aria-label-"ibE"" role-| 


S5dy/1ntWr2ym7f t23XKKDBAXecy XwTYeSnpTxBT8sotHGksznDvr2ujt2TEU7NW3158 j2VevUuTnrvuBpA2KYV1i 
USe11/AcF bgqsoDe73s"z9GzPu«1,j7poitnhFsIOULVKSEuh jAenVxPhduDSZOUr 186L20TMS9dgp8+mv+rJEbJI 

isi«/div»c/div»«/a»c/li»«/div»e/div»«/div»div id-"hp mobile" data-ajaxiid-"5044" data-dat 
Dbirj2"v7bekpszGOsihFU3V7rAkzsvsueMaLei fODd]ng« t GMLIKn3wF 2TQhvdoNg£QfvfitHPU3paPpY joasxlgri 


图 18-2 


这 说 明 HTTP 通信 成 功 了 。 下 一 步 我 们 把 这 些 HTML 文本 设置 给 WebView 控件 以 显示 网 
页 。 但 是 ， 我 们 不 把 WebView 直接 添加 到 当前 页 面 中 ， 而 是 新 启动 一 个 页 面 (Activity) ， 在 
新 页 面 中 嵌入 一 个 WebView， 由 它 来 显示 这 个 网 页 。 

下 面 在 testGetHTMLO 中 添加 这 部 分 代码 〈 粗 体 部 分 ) : 


Thread (Runnable( 
try { 
val urlObj - URL("https://cn.bing.com") 
val connection = urlObj.openConnection() as HttpURLConnection 


JL REÉTREBE, XX  IPRIBEHEB TERI 


connection.connect () 
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val ins = connection.getInputStream() 


VIFK, PUES 
val buffer = ByteArray(4096) 
val stringBuffer = StringBuffer() 
var ret = ins.read(buffer) 
// BR, Fikh T 4096 FË, BMF StringBuffer 办 
while (ret >= 0) { 
// ARR MERRE P 
if (ret > 0) { 
//LBUSIRS I KHU uTML KE, Pr URERA FIFE 
val html = String (buffer, 0, ret) 
stringBuffer.append (html) 
ret - ins.read(buffer) 


) 


// Al Stringbuffer PRH AHI HTML 
val allHtml - stringBuffer.toString() 
// TEEISI Activity HICA UI REPKI, BIF H beii 
val handler = Handler (this@MainActivity.mainLooper) 
handler .post (Runnable ( 
// ESIEEÉS Activity, ARAH 
//8/& Intent 
val intent = Intent(this?MainActivity, WebActivity::class.java) 
intent.putExtra("html", allHtml) 
// activity 
startActivity (intent) 


) 
) catch (e: IOException) ( 
e.printStackTrace() 


) 

}) .start() 

增加 了 启动 WebActivity 的 代码 。 因 为 Activity 也 属于 UI， 所 以 将 这 部 分 代码 “ 扔 ”到 主 
线程 中 执行 。 注 意 ，HTML 文本 被 放 到 了 Intent 中 进行 传递 。 

毫 无 疑问 ， 我 们 还 需 增 加 WebActivity。 然 后 在 它 的 Layout 中 添加 一 个 WebView 并 设置 
id 为 “webView”， 最 后 在 WebActivity 中 取出 HTML 代码 并 设置 给 WebView。 代 码 如 下 : 


class WebActivity : AppCompatActivity() ( 


override fun onCreate(savedInstanceState: Bundle?) { 
super.onCreate (savedInstanceState) 
setContentView(R.layout.activity web) 


val html - intent.getStringExtra ("html") 
webView.loadData (html, "text/html", "utf8") 
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将 HTML 代码 设置 给 WebView 是 通过 调用 其 方法 loadData0 
完成 的 。 它 的 第 一 个 参数 是 数据 ， 即 HTML 文本 ; 第 二 参数 是 数 
据 的 格式 ， 以 MIME 类 型 表示 法 说 明 类 型 ， 第 三 个 参数 是 数据 的 
编码 ， 首 选 UTF-8。 

运行 App, 单 击 “ 访 问 网 页 ”按钮 , 过 一 会 就 会 进入 新 页 面 ， 有 
显示 出 一 个 网 页 ， 如 图 18-3 所 示 。 切换 至 国际 版 


WebActivity 


18-3 


使 用 “异步 任务 ” 


异步 任务 与 网 络 没 有 关系 ,只 是 一 种 多 线程 调用 的 处 理 模 型 。 使 用 它 , 省 去 了 我 们 在 线程 
间 “ 扔 ”代码 的 操作 。 虽 然 使 用 率 不 高 ， 但 由 于 是 Android 官方 提供 的 ， 因 此 有 必要 稍微 了 解 
= 

使 用 异步 任务 ， 需 要 从 AsyncTask 类 派生 一 个 类 ， 然 后 重 写 几 个 回调 方法 。 重 要 的 是 清楚 
这 些 方法 在 哪个 线程 中 运行 ， 以 放置 合适 的 代码 。 


18.3.1 定义 异步 任务 类 


AsyncTask 是 一 个 范 型 类 ， 它 的 子 类 需要 在 定义 时 传 入 三 个 类 型 作为 参数 ， 三 个 类 型 的 作 
用 可 以 从 AsyncTask 类 的 定义 中 看 出 来 : 
public abstract class AsyncTask<Params, Progress, Result> { 


Params 是 任务 所 需 参 数 的 类 型 ，Progress 是 任务 进行 过 程 中 表示 进度 的 类 型 ，Result 是 任 

比如 我 们 创建 一 个 从 网 上 下 载 图 像 的 任务 , 一 次 下 载 多 个 图 像 , 每 次 所 下 载 图 像 的 网 址 就 
可 以 作为 这 个 任务 的 参数 。 这 个 任务 的 第 一 个 参数 是 String 类 型 (注意 虽然 传 的 是 多 个 网 址 ， 
但 这 里 的 类 型 的 确 是 “String” 而 不 是 “Array<String>”， 后 面 看 到 示例 代码 就 会 明白 ) ; 第 
二 个 参数 表示 当前 任务 进度 的 类 型 ， 比 如 一 次 下 载 10 个 图 片 ， 每 下 载 一 个 进度 加 1， 所 以 进 
度 应 该 用 一 个 整数 表示 ， 所 以 是 Int 类 型 ， 这 个 任务 会 下 载 10 个 图 片 ， 也 就 是 任务 的 结果 ， 
所 以 第 三 个 参数 应 该 是 “Array<Bitmap>” (注意 这 里 必须 是 数组 ， 跟 任务 参数 不 一 样 ) 。 下 
面 就 用 代码 具体 演示 一 下 。 

先 定义 一 个 异步 任务 类 的 骨架 (为 了 方便 ， 把 它 放 到 MainActivity 中 作为 内 部 类 ) : 

inner class HttpAsyncTask: AsyncTask«String, Int, Array<Bitmap?>?>() { 


//UI REPKI 


override fun onPreExecute() { 


super.onPreExecute() 
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// 后 合 绪 枉 办 项 疗 


override fun doInBackground(vararg string: String?): Array«Bitmap?»? { 
TODO("not implemented") 

) 

//01 BERKIT 

override fun onPostExecute(bitmaps: Array«Bitmap?»?) ( 
super.onPostExecute (result) 

) 

) 


我 们 重 写 了 三 个 方法 ,当然 还 可 以 重 写 其 他 方法 , 但 一 般 不 会 复杂 到 那 种 程度 , 这 里 只 讲 
最 常用 的 几 个 方法 。 
* onPreExecute() 在 UI 线程 中 执行 ， 用 于 在 任务 执行 前 做 准备 ， 主 要 是 UI 方面 的 准备 ， 比 如 


设置 进度 条 总 值 和 步 进 值 。 

e doInBackground() 方 法 在 后 台 线 程 中 运行 ,也 就 是 任务 的 主体 部 分 ， 在 这 个 方法 中 可 以 做 耗 
时 的 操作 。 

* onPostExecute() 在 任务 执行 完 后 调用 ， 也 是 在 UI. 线程 中 执行 的 ， 一 般 用 于 把 结果 设置 到 
View 中 。 


范 型 参数 1 对 应 到 doInBackground0 的 参数 。 注 意 ， 此 方法 是 可 变 参数 ， 所 以 可 以 传 入 多 
个 同类 型 的 实 参 。 

方法 doInBackground0 由 Android 框架 调用 ， 我 们 不 能 直接 调用 ， 但 它 的 参数 却 是 我 们 指 
定 的 。 这 是 怎么 做 到 的 呢 ? 启动 一 个 异步 任务 需 调 用 异步 任务 类 的 方法 execute0。 我 们 看 一 下 
它 的 定义 : 

public final AsyncTask<Params, Progress, Result» execute (Params... params) { 

throw new RuntimeException ("Stub!"); 

} 

它 的 参数 正好 对 应 doInBackground0 方 法 的 参数 ， 所 以 启动 一 个 异步 任务 时 传 入 的 参数 最 
终 给 了 doInBackground(). 

范 型 参数 2 在 这 段 代码 中 体现 不 出 来 。 

范 型 参数 3 对 应 到 doInBackgroud0 的 返回 类 型 和 onPostExecute() 的 参数 类 型 .这 很 好 理解 ， 
任务 在 执行 完成 后 产生 的 结果 应 该 传 给 主线 程 处 理 , 而 onPostExecute0 就 是 在 主线 程 中 执行 的 。 


18.3.2 ”使 用 异步 任务 类 
如 何 使 用 这 个 类 呢 ? 很 简单 ， 创 建 实例 ， 调 用 其 execute0 方 法 ， 代 码 如 下 : 


val asyncTask = HttpAsyncTask() 

asyncTask.execute( 
"http://www.tucoo.com/photo/water 02/s/water 05102s.jpg", 
"http://www.tucoo.com/photo/water 02/s/water 05203s.jpg", 
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"http://www.tucoo.com/photo/water 02/s/water 05304s. jpg", 
"http://www.tucoo.com/photo/water_02/s/water_05405s. 
"http://www.tucoo.com/photo/water 02/s/water 05506s.j 
"http://www.tucoo.com/photo/water 02/s/water 05607s.j 
"http://www.tucoo.com/photo/water 02/s/water 05708s.jpg", 
"http://www.tucoo.com/photo/water 02/s/water 05809s.jpg", 
"http://www.tucoo.com/photo/water 02/s/water 05910s.jpg" 

"http: //www.tucoo.com/photo/water 02/s/water 06617s.jpg" 

) 


为 execute) 10 个 图 像 URL 地 址 的 字符 串 〈 有 可 能 失效 ) ， 这 些 参数 最 终 会 传 给 
doInBackground()。 这 段 代码 必须 在 主线 程 中 调用 ， 比 如 我 们 响应 某 个 按钮 的 单 击 事件 时 调用 。 
下 面 我 们 实现 一 下 doInBackground0 〈 不 实现 它 ， 这 个 任务 就 啥 也 不 做 ) : 


ILE EEBTMT 
override fun doInBackground(vararg strings: String?): Array«Bitmap?»? ( 
LHKEORIISEINESUG FREIHERR 
for (urlstr in strings) ( 
try { 
// HIS BE URL FIFRE URL HR 
val urlObj - URL(urlstr) 
val connection - urlObj.openConnection() as HttpURLConnection 
LE TAERE, 1X  IPUTBETEM FERT 
connection.connect() 
val ins - connection.getInputStream() 
//A InputStream IEA ZEE JESEPIUIL fit F] 
val bitmap - BitmapFactory.decodeStream(ins) 
Log.i("task", "bitmap width=" + bitmap.width + ",height-" + 
bitmap.height) 
) catch (e: IOException) ( 
e.printStackTrace() 


) 


return null 


) 


我 们 下 载 了 每 个 URL 所 指向 的 图 像 ， 然 后 解码 成 位 图 ， 再 在 日 志 中 输出 它们 的 宽 和 高 。 
运行 后 可 以 在 Logcat 窗口 中 看 到 图 18-4 所 示 的 日 志 ， 说 明 下 载 成 功 了 。 


D/libc-netbsd: [getaddrinfo]: hostname-ww«.tucoo.com; servname-(null); 
I/task: bitmap width-158,height-119 
I/task: bitmap width-158,height-119 
I/task: bitmap width-158,height-119 
I/task: bitmap width-158,height-119 
I/task: bitmap width-158,height-119 
I/task: bitmap width-158,height-119 
I/task: bitmap width-158,height-119 
I/task: bitmap width-158,height-119 
I/task: bitmap width-158,height-119 


18-4 
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18.3.3 ”完善 异步 任务 类 


还 有 两 个 方法 没有 实现 : 一 个 是 onPreExecute0， 在 其 中 只 需要 
准备 进度 条 控件 即 可 ; 另 一 个 是 onPostExecute0， 在 其 中 把 传 入 的 
Bitmap 设置 到 图 像 控件 中 显示 。 

需要 先 准 备 好 10 个 图 像 控件 ， 所 以 改 一 下 Activity 的 Layout i 
计 〔 改 为 图 18-5 所 示 的 样子 ) 。 

源码 为 : 

<?xml version-"1.0" encoding="utf-8"?> 


«androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/ 


scar mar wmm 


[Fabierow. 


res/android" 


xmlns:tools-"http://schemas.android.com/ tools" 
xmlns:app-"http://schemas.android.com/apk/ 图 18-5 
res-auto" 
android:layout width-"match parent" 
android:layout height-"match parent" 
tools:context-".MainActivity"^ 
«Button android:id-"0-id/buttonShowTip" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:text=" 显 示 提示 " 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toTopOf-"parent"/» 


«Button android:id-"8-*id/buttonStartThread" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:text=" 创 建 线程 " 
app:layout constraintstart toEndof="@+id/buttonshowTip" 
app:layout constraintTop toTopOf-"parent"/» 
«Button android:id-"0-id/buttonWebPage" 
android:layout width-"wrap content" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:text=" 访 问 网 页 " 
app:layout constraintStart toEndo. 


"Q-id/buttonStartThread" 
app:layout constraintTop toTopOf-"parent"/» 
XProgressBar android:id-"G*id/progressBar" 
style-"?android:attr/progressBarStyleHorizontal" 
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android:layout width-"Odp" 

android:layout height-"wrap content" 

android:layout marginEnd-"8dp" 

android:layout marginStart-"8dp" 

android:layout marginTop-"16dp" 

app:layout constraintEnd toEndOf-"parent" 

app:layout constraintStart toStartOf-"parent" 

app:layout constraintTop toBottomOf- "@+id/buttonStartThread" /> 
XTableLayout android:layout width-"Odp" 

android:layout height-"Odp" 

android:layout marginBottom-"8dp" 

android:layout marginEnd-"8dp" 

android:layout marginStart-"8dp" 


android:layout marginTop-"16dp" 
app:layout constraintBottom toBottomOf-"parent" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-" Gxid/progressBar"^ 
«TableRow android:layout width-"match parent" 
android:layout height-"match parent"> 
<ImageView android:id-"0-4id/imageView2" 
android:layout width-"100dp" 
android:layout height-"100dp"/» 
<ImageView android:id-"G-4id/imageViewl" 
android:layout width-"100dp" 
android:layout height-"100dp"/» 
<ImageView android:id="e+id/imageView6" 
android:layout width-"100dp" 
android:layout height-"100dp"/» 
«/TableRow^ 
«TableRow android:layout width-"match parent" 
android:layout height-"match Parent"> 
<ImageView android:id="e+id/imageView3" 
android:layout width-"100dp" 
android:layout height-"100dp"/» 
«ImageView android:id-"G8*id/imageView4" 
android:layout width-"100dp" 
android:layout height-"100dp"/» 
«ImageView android:id-"G8*id/imageView5" 
android:layout width-"100dp" 
android:layout height-"100dp"/» 
«/TableRow^ 
«TableRow android:layout width-"match parent" 
android:layout height-"match parent"^ 


«ImageView android:id-"G&*id/imageView7" 
android:layout width-"100dp" 
android:layout height-"100dp"/» 
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«ImageView android:id="e+id/imageView8" 
android:layout width-"100dp" 
android:layout height-"100dp"/» 

«ImageView android:id-"G&*id/imageView9" 
android:layout width-"100dp" 
android:layout height-"100dp"/» 

«/TableRow» 
«TableRow android:layout width-"match parent" 
android:layout height-"match Parent"> 

«ImageView android:id-"G*id/imageView10" 
android:layout width-"100dp" 
android:layout height-"100dp"/» 

«/TableRow^ 
«/TableLayout^ 
X/androidx.constraintlayout.widget.ConstraintLayout^ 


progressBar 是 进度 条 ， 其 id 为 progressBar，10 个 图 像 控 件 放 在 了 一 个 TableLayout 中 ， 
它们 的 id 从 imageViewl 到 imageView10 。 把 这 些 控件 对 应 的 变量 放 到 一 个 数组 中 ， 便 于 后 
面 用 循环 操作 它们 : 


class MainActivity : AppCompatActivity() ( 
private val imageViews = arrayOfNulls«ImageView» (10) 


它们 的 初始 化 在 Activity 的 onCreate0 中 : 


override fun onCreate(savedInstanceState: Bundle?) ( 
super.onCreate (savedInstanceState) 
setContentView(R.layout.activity main) 


LLBAPEES PARIME 

imageViews[0] = this.imageViewl 
imageViews[1] - this.imageView2 
imageViews[2] - this.imageView3 
imageViews[3] - this.imageView4 
imageViews[4] - this.imageView5 
imageViews[5] = this.imageView6 
imageViews[6] = this.imageView7 
imageViews[7] - this.imageView8 
imageViews[8] = this.imageView9 
imageViews[9] = this.imageViewlO 


下 面 实现 异步 任务 类 的 onPreExecute()。 在 其 中 只 需 做 初始 化 进度 条 的 工作 ， 但 是 我 们 需 
要 知道 调用 execute E] EA H URL 数量 才能 设置 好 进度 总 值 ,所 以 我 们 应 该 为 HttpAsyncTask 
增加 一 个 带 参数 的 构造 方法 ， 参 数 就 是 URL 的 数量 。 修 改 任务 类 代码 : 
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inner class HttpAsyncTask(val taskNum:Int): AsyncTask«String, Int, 
ArraycBitmap?» >(){ 


为 它 增 加 了 属性 taskNum， 其 值 通 过 构造 方法 传 入 ， 所 以 在 创建 HttpAsyncTask 实例 时 要 
传 入 参数 : 


val asyncTask = HttpAsyncTask (10) 


现在 可 以 实现 onPreExecute0 了 ， 很 简单 : 


inner class HttpAsyncTask(val taskNum:Int): AsyncTask«String, Int, 
Array«Bitmap?»»()( 
//U1 BERKIT 
override fun onPreExecute() ( 
super.onPreExecute() 
progressBar.setMax (taskNum); 


再 实现 onPostExecute(): 
//U1 ZETA T 


override fun onPostExecute (bitmaps: Array«Bitmap???) { 
if (bitmaps -- null) ( 
return 
) 
/ LH SEIS ERAR E FIHI ImageView 办 
for (i in 0 until imageViews.size - 1) ( 
imageViews[i]?.setlImageBitmap (bitmaps[i]) 


) 
此 时 需要 修改 一 下 doInBackground0， 才 能 与 上 面 两 个 方法 配合 起 来 〈 见 粗 体 部 分 ) : 
/ILHBEEEBP AIT 


override fun doInBackground(vararg strings: String?): Array«Bitmap?^? 1{ 
11 RERA ER 
val bitmaps = arrayOfNulls<Bitmap> (strings.size) 
LHKIORIISE NEG FREIHERR 
for (i in O0..strings.size - 1) ( 
try { 
// Hr2 BE URL FFR Æ URL HR 
val urlObj - URL(strings[i]) 
val connection - urlObj.openConnection() as HttpURLConnection 
VIITE, 1X  EUIBETEM FERT 
connection.connect() 
val ins = connection.getInputStream() 
//A InputStream A KHE HARK iz B 
val bitmap = BitmapFactory.decodeStream(ins) 


/ LBCBDREBE RARP 
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bitmaps[i]-bitmap 
/HAUEHEUESEERESUEVERE, 1 oF, MUZUL 
publishProgress (i+1) 
) catch (e: IOException) ( 
e.printStackTrace() 
return null 


) 
//3& II] Bitmap #A 
return bitmaps 

} 

最 后 返回 Bitmap 数组 ， 而 且 在 循环 中 每 下 载 一 幅 图 像 就 更 新 一 下 进度 条 ， 当 然 不 是 直接 
更 新 ， 而 是 调用 方法 publishProgress0 通 知 主线 程 ， 由 主线 程 更 新 进度 条 。 但 是 主线 程 现在 更 
新 不 了 进度 条 , 因为 我 们 还 需要 在 类 HttpAsyncTask 中 实现 一 个 回调 方法 onProgressUpdate()。 
此 方法 在 主线 程 中 执行 ， 代 码 如 下 : 


override fun onProgressUpdate (vararg values: Int?)( 


显示 握 示 emer 。。 访问 网 页 


progressBar.setProgress (values[0]!!) 


} -E 
ETT H gie 


异步 任务 类 最 终 的 代码 如 下 : wd 
inner class HttpAsyncTask (val taskNum:Int): Sy." -` 
AsyncTask<String, Int, Array<Bitmap?>>() { ! 
//U1 RERIT 5 


override fun onPreExecute() { 
super.onPreExecute() k 
progressBar.setMax(taskNum); 


) 图 18-6 

/ILIBEERI Pl T 

override fun doInBackground(vararg strings: String?): Array«Bitmap?»? ( 
1/1 RIFA BIR 


val bitmaps = arrayOfNulls<Bitmap> (strings .size) 
LIIS, TRÈT IMER 
for (i in 0..strings.size - 1) { 
try { 
// HÝ URL FPFE IÆ URL XR 
val urlObj = URL(strings[il) 
val connection = urlObj.openConnection() as HttpURLConnection 
IIITER, XX  HIPRIBEHEB TERT 
connection.connect () 


val ins = connection.getInputStream() 


//A InputStream DEA REHAR HIE] 
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val bitmap = BitmapFactory.decodeStream(ins) 
// QEIRA P 
bitmaps [i]=bitmap 
LHBATEEUEUENERERE ATE, i M 0 PS. MAZ 
publishProgress (i41) 

) catch (e: IOException) { 
e.printStackTrace() 


return null 


) 
//%8F] Bitmap #4 
return bitmaps 
} 
//U1 ÉEPPRÍT 
override fun onPostExecute(bitmaps: Array«Bitmap?»?) ( 
if (bitmaps -- null) ( 
return 


) 

ILES NER ARR EPIRI Imageview f 

for (i in 0 until imageViews.size - 1) ( 
imageViews [i]?.setlImageBitmap (bitmaps[i]) 


} 
) 


override fun onProgressUpdate(vararg values: Int?) { 
progressBar.setProgress (values[0]!!) 
) 
) 


现在 的 代码 在 逻辑 上 还 有 很 多 不 严谨 的 地 方 ， 但 可 以 让 大 家 清晰 地 看 清 异 步 任务 的 用 法 。 
18.3.4 ”异步 任务 的 退出 


异步 任务 的 后 台 方 法 在 后 台 线程 中 执行 ， 所 以 异步 任务 在 本 质 上 与 创建 新 线程 没有 区 别 ， 
我 们 需要 异步 任务 所 在 的 Activity 在 销毁 时 尽快 停止 异步 任务 。 参 考 前 面 讲 的 线程 的 退出 问题 ， 
我 们 需要 让 异步 任务 的 doInBackground( 方 法 尽快 退出 。 这 需要 在 另外 的 线程 中 发 出 停止 异步 
任务 的 指令 。AsyncTask 类 已 经 为 我 们 准备 好 了 ， 它 有 个 方法 cancel0， 可 以 在 任何 时 刻 任何 
线程 中 调用 ， 但 是 调用 它 并 不 能 让 doInBackgroundO 立 即 退出 ， 调 用 它 带 来 的 效果 是 发 出 取消 
指令 ， 之 后 当 再 调用 异步 任务 的 isCancelled0 方 法 时 会 返回 true. (默认 返回 false) 。 我 们 可 利 
用 这 一 点 把 异步 任务 的 Cancel 状态 作为 doInBackgroundO 里 面 循 环 语句 所 检查 的 条 件 之 一 , 所 
以 doInBackground() 方 法 应 改动 如 下 : 

IHRER NEC FRETKI 

for (i in O0..strings.size-1) { 

if(isCancelled)( 
break; 
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} catch (e: IOException) ( 


在 执行 循环 代码 之 前 检查 了 一 下 cancel0 是 否 被 调用 ， 如 果 被 调用 了 ， 就 直接 跳出 循环 。 
当然 考虑 到 循环 中 的 代码 有 的 操作 也 是 很 耗 时 间 的 , 为 了 能 反应 更 快 , 也 可 以 在 代码 中 间 插 入 
Cancel 状态 的 检查 ， 具 体 如 下 注意 粗 体 语句 〉: 


// 诬 多 到 得 每 个 参阅 ， 下 载 它 雍 向 所 略 俐 
for (i in O..strings.size-1) { 
if(isCancelled)( 
break; 
) 


try { 
// HIS BE URL TEfTABEJEE URL HR 
val urlObj - URL(strings[i]) 
val connection - urlObj.openConnection() as HttpURLConnection 
VINTER, BETETE AFERI 
connection.connect () 
if(isCancelled)( 
break; 
) 
val ins - connection.getInputStream() 
if(isCancelled)( 
break; 
) 
//A InputStream IEA ZEZE JESEIHUI fv F] 
val bitmap - BitmapFactory.decodeStream(ins) 
/ REIRI RRA p 
bitmaps[i]-bitmap 
if(isCancelled)( 
break; 
) 
/LHATEHEUEBEEBERMERS, i M oF, BELGII 1 
Log.e ("nnn", (i+1) .tostring ()) 
publishProgress (i+1) 
} catch (e: IOException) { 
e.printStackTrace() 
return null 
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可 以 看 到 在 所 有 可 能 耗 时 的 操作 后 进行 了 检查 。 其 实 一 般 情况 下 没有 必要 做 到 这 种 程度 ， 
只 要 在 循环 开始 检查 一 次 就 行 ， 我 们 又 不 是 做 那 种 对 时 间 要 求 很 严格 的 实时 系统 。 

最 后 , 这 个 cancel() 方 法 在 哪里 调用 呢 ? 就 在 Activity 的 onDestroy0 中 , 代码 如 下 (注意 ， 
需要 将 变量 asyncTask 设 成 MainActivity 的 字段 ) : 


override fun onDestroy() ( 


/L RUMBA S UA Eke false RRT PZN 
if(asyncTask !- null) ( 
asyncTask.cancel(false); 
) 
super.onDestroy () // BAWA — FEHI -ZE 

} 

一 旦 对 某 个 异步 任务 调用 了 cancel0， 当 它 的 doInBackground0 完 成 后 ， 就 不 再 调用 
onPostExecute() 了 ， 而 是 调用 onCancelled0。 根 据 我 们 现在 的 需求 ， 在 onCancelled0 中 什么 也 
不 需要 做 : 

override fun onCancelled() ( 

super.onCancelled() 


} 
当然 ， 既 然 什 么 也 不 做 ， 也 可 以 不 实现 它 。 


18.4 gH OKHttp 进行 网 络 通信 


OkHttp 是 使 用 率 非常 高 的 第 三 方 ( 非 Android 官方 ) Java HTTP 通信 库 ， 用 起 来 很 方便 。 
使 用 它 ， 就 不 必 使 用 HttpURLConnection 之 类 的 Android 原生 API 了。 

当 接 触 一 个 新 的 库 或 框架 时 ， 最 好 先 去 它 的 官方 网 站 mossa e zis- 
看 一 下 ， 一 般 都 能 帮助 我 们 快速 入 门 ， 比 如 Arme | 
http://square.github.io/okhttp/。 

下 面 我 们 用 OkHttp 来 实现 前 面 下 载 图 像 的 例子 。 

首先 在 Module 的 Gradle 脚本 中 添加 对 OkHttp 的 依赖 ， 
如 图 18-7 所 示 。 

最 下 面 一 句 就 是 OkHttp 的 依赖 : 

dependencies { 图 18-7 

implementation fileTree(include: ['*.jar'], dir: 'libs') 


/& settings gradle (Pr 


Be Resource Manager 


fly locol properties (SOK Lo 


implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin version" 
implementation 'androidx.appcompat:appcompat:1.1.0-alpha04" 
implementation 'androidx.core:core-ktx:1.1.0-alpha05' 

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha4' 
implementation 'com.google.android.material:material:1.1.0-alpha05' 


testImplementation 'junit:junit:4.13-beta-2' 
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androidTestImplementation 'androidx.test:runner:1.2.0-alpha04' 
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0- 
alpha04' 
implementation 'com.squareup.okhttp3:okhttp:3.14.1' 
} 


其 版 本 号 可 以 在 GitHub 托管 页 面 https://github.com/square/okhttp 上 看 到 CILA 18-8) 。 
添加 后 会 出 现 一 个 同步 提示 ， 如 图 18-9 所 示 。 


Download 
Download the latest JAR or configure this dependency: s epp. - 
ERLL Li 
implementation("com.squareup.okhttp3:okhttp:3.14.1") = 
Types { 
图 18-8 18-9 


单 击 它 执行 Grade 脚本 同步 工程 ， 在 此 过 程 中 会 把 OkHttp3 这 个 库 下 载 到 本 地 ， 并 自动 
在 工程 中 引用 它 ， 于 是 我 们 就 可 以 在 工程 中 使 用 它 了 。 
下 面 我 们 用 OkHttp 来 改写 下 载 多 个 图 片 的 功能 。 


18.4.1 使 用 OkHttp 下 载 图 像 
只 需要 改写 异步 任务 中 网 络 访问 的 代码 即 可 ， 代 码 如 下 : 


override fun doInBackground(vararg strings: String?): Array<Bitmap?>? { 


11 RIERA BIR 
val bitmaps = arrayOfNulls«Bitmap» (strings .size) 
// &l& okuttp EPIR 


val client = OkHttpClient() 


LHKRUORIISE INEO FREIHERR 
for (i in O0..strings.size-1) ( 
if(isCancelled)( 


break; 

} 

try { 
V PIALI GNERRE SERE 
val builder = Request.Builder() 
// ERÉ URL Hh 
builder.url(strings[i]l) 
// ÜJ& CR ERR 


val request = builder.build() 

I1 EF HII RPTE RII R DIRE WAR 

val call = client.newCall (request) 

VIBIEN R, KARER, MEME BIETER: Response 办 
11 EREE AGE 


val response = call.execute() 
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// ill Http UFR (DE nttp body) 

val body - response.body() 

body?.let ( 
// 因 为 我 们 知 说 body (18 FIIRÉTZHE, AAEH bytestream () ZEIGT H7 
val inputStream = body.byteStream() 
LIIS SALES decodeStream () AFK Bitmap 


val bitmap - BitmapFactory.decodeStream(inputStream) 


/L BCEDGL RKR AP 
bitmaps[i] = bitmap 
LDBATEZEEUENTEERESEIERE, 1 M 0 PAS, MAZ 
publishProgress(i + 1) 

) 

) catch (e: IOException) ( 
e.printStackTrace() 
return null 


) 
//X&Hl bitmap 3H 


return bitmaps 


} 
代码 的 详细 解释 请 看 注释 ， 这 里 总 结 一 下 OkHttp 下 载 数据 的 调用 流程 : 


€ 创建 请 求 构建 器 。 

e 创建 请 求 对 象 。 

e 创建 Client。 

e 利用 Client 创建 Call 对 象 。 

e 利用 Call 发 出 调用 ， 返 回 结果 存在 ResponseBody 中 。 
* 从 ResponseBody 中 按照 数据 的 格式 取出 数据 。 


这 段 代 码 中 的 网 络 访问 和 处 理 返回 数据 的 部 分 可 以 写 得 更 简洁 一 些 : 


val builder = Request.Builder() 
val request = builder.url(strings[i]).build() 
val response = client.newCall(request).execute() 
val inputStream - response.body()?.byteStream() 
inputStream.let( 
val bitmap - BitmapFactory.decodeStream(inputStream) 
/ HBCBIGLIEBERRL p 
bitmaps[i] = bitmap 
/ HÉACEEUE MEER ERE, i MoH MUZ 
publishProgress(i + 1) 
) 


注意 ， 从 服务 端 获取 数据 都 是 用 HITP GET 命令 ， 在 上 面 的 代码 中 并 没有 指定 是 哪 种 命 
令 ， 是 因为 默认 就 是 GET。 当 然 ， 也 可 以 在 Builder 中 通过 get0 方 法 明确 指定 : 
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val request = builder.url(strings[i]).get().build() 
18.4.2 ”创建 Web 服务 端 


后 面 的 内 容 涉及 数据 上 传 、 文 件 上 传 等 功能 , 我 们 必须 有 自己 的 Web 服务 程序 才能 测试 ， 
所 以 现在 要 创建 一 个 Web 服务 程序 。 

创建 Web 程序 需要 Java Web 开发 技术 。 对 此 不 熟悉 也 没有 关系 ， 我 们 准备 了 一 个 项 目 ， 
只 要 在 计算 机 上 把 它 运行 起 来 ， 就 可 以 在 App 中 访问 。 这 个 项 目 利用 了 SpringBoot 框架 ， 以 
Maven 为 项 目 管理 工具 与 Gradle 240) , 所 以 只 要 能 上 网 就 可 以 利用 命令 行 轻松 运行 起 来 。 

运行 这 个 程序 的 命令 很 简单 : mvn spring-bootrun。 但 是 , 要 先 把 Maven 安装 到 计算 机 上 ， 
否则 找 不 到 mm 这 个 工具 。 去 官网 ( 见 图 18-10) FAX Maven 〈 最 新 版 即 可 ) ， 地 址 是 
https://maven.apache.org/download.cgi 


P d Apache Maven Project 

nttp:]/ maven-apache.or 

Welcome Downloading Apache Maven 3.6.1 

eee Apache Maven 3.8.1 is the latest release and recommended version for all users. 

—: The currently selected download mirror is hftp://mirrors.tuna.tsinghua.edu.cr/af 
What ls Maven? Backup mirrors (at ne end of the mimos list) Ihat should be avalabie You may a 
Features Other mimors: | Mp imiror bl ea cnvapache ~ [Cras 


图 18-10 
压缩 包 下 载 地 址 为 http://mirrors.tuna.tsinghua.edu.cn/ 


apache/maven/maven-3/3.6.1/binaries/apache-maven-3.6.1 


L4 


-bin.zip。 我 们 下 载 的 是 3.6.1 版 。 en 
下 载 后 解压 缩 zip 文件 ， 把 文件 夹 放 到 某 个 目录 下 | cn 
比如 图 18-11 所 示 的 位 置 。 cios 


mvn 命令 在 文件 夹 bn 下 ， 为 了 在 任何 目录 下 都 能 B rione 
访问 这 个 命令 ， 我 们 需要 把 bin 文件 夹 加 入 系统 环境 变 


量 PATH 中 《〈 见 图 18-12) 。 


图 18-11 


CNUsersAdministmatonAppDataMacaNprogramspythonPythonaGv 
KUSERPRORILEWAppData\L ocaNMicrosoft\WindowsApps map | 
CAProgrom Files\Microsoft VS Code\bin T2 
CAdevibolsapache-maven-3 6. bin | == 


18-12 


EUserAomnistaronAppD a ocaproorams Python Python3AScip ] 
E 


354 


图 18-13 


再 下 载 Web 程序 源码 Chttps:/github.com/niugao/QQAppServer/archive/master.zip) ， 并 解 
下 到 某 个 文件 夹 下 (比如 图 18-14 所 示 的 位 置 ) 。 

在 命令 行 窗 口中 ， 进 入 QQAppServer-master 文件 夹 ， 再 执行 命令 mvn spring-boot:run (W, 
图 18-15) 。 


Bi > work(F) > workspace > QQAppServer-master 


名 称 


^ idea 

^ src 

2 pom.xml 
QQAppserver.iml 
README.md 


图 18-14 图 18-15 
第 一 次 运行 还 是 很 耗 时 间 的 , 主要 是 需要 从 Maven 仓库 中 下 载 很 多 依赖 库 Jar 文件 , 所 以 
需要 耐心 等 待 ， 只 要 命令 行 窗口 中 没有 出 现 红 色 的 语句 ， 就 说 明 没 有 错误 。 当 看 到 如 图 18-16 
所 示 的 语句 时 ， 说 明 Web 服务 启动 成 功 。 


图 18-16 
打开 浏览 器 , 在 地 址 栏 中 输入 地 址 “http://localhost:8080”， TE 
可 以 看 到 如 图 18-17 所 示 的 网 页 。 4 senbor, ansible, LB AndroidDeviools 
到 此 为 止 ，Web 服务 程序 配置 成 功 。 File to upload: EESTE | eterne 
Upload 
18.4.3 ”使 用 OkHttp 下 载 数据 
图 18-17 


通过 HTTP 协议 可 以 下 载 各 种 数据 ， 比 如 下 载 一 个 产品 的 信息 、 下 载 一 幅 图 像 、 下 载 一 个 
文件 、 下 载 一 个 网 页 。 实 际 上 从 HTTP 的 打包 方式 来 讲 ， 这 些 数据 基本 可 分 成 两 大 类 : 一 是 文 
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本 , 二 是 二 进 制 数据 。 网 页 属于 文本 , 图 像 、 文 件 属于 二 进 制 数据 , 至 于 产品 信息 这 样 的 数据 ， 
在 内 存 中 是 一 个 对 象 , 但 一 般 也 用 文本 表示 ,所 以 要 利用 那些 可 以 方便 地 表示 对 象 的 文本 格式 ， 
比如 JSON、XML 等 。 

不 论 服务 端 收 到 客户 端的 数据 还 是 客户 端 收 到 服务 端的 数据 ,都 需要 知道 数据 的 具体 格式 ， 
所 以 HTTP 包头 中 带 有 MIME 信息 ,比如 “text/html” 表 示 HTTP 包 的 body 中 携带 的 是 HTML 
文本 、“text/json” 表 示 携 带 JSON 文本 〈 其 实 对 应 对 象 ) 、“image/png” 表 示 携 带 PNG 格 
式 的 图 像 。 在 MIME 中 ，“/” 之 前 是 大 类 别 ，“/” 之 后 是 小 类 别 。 

浏览 器 从 服务 端 下 载 的 文本 数据 一 般 是 HTML, 而 App 下 载 的 文本 大 多 是 JSON。 比 如 一 
个 电子 商务 Web 服务 器 ， 它 既 能 为 浏览 器 提供 商品 展示 数据 也 能 为 App 提供 商品 展示 数据 ， 
但 是 它 为 浏览 器 提供 的 是 HIML， 这 个 HTML 中 不 仅 包含 了 多 个 商品 信息 ， 还 包含 了 如 何 展 
示 和 摆 放 这 些 信息 的 代码 ， 这 些 都 是 在 服务 端 已 经 确定 的 ， 浏 览 器 只 需 忠 实地 按照 HTML fX 
码 把 网 页 创建 并 展示 出 来 即 可 ， 而 服务 端 为 App 提供 的 是 JSON，JSON 中 仅 包含 了 各 商品 的 
信息 ， 至 于 商品 如 何 展示 则 由 App 自己 决定 。 所 以 为 App 提供 的 数据 更 具 视 觉 可 塑性 ， 且 网 
络 传输 的 数据 量 更 少 。 其 实现 在 网 页 版 数据 也 在 转向 App 的 数据 形式 ， 即 服务 端 向 浏览 器 发 
送 仅 包含 商品 信息 的 JSON， 浏 览 器 用 JavaScript 将 JSON 中 的 商品 信息 取出 来 ， 再 决定 它们 
的 展示 方式 。 

在 App 中 是 以 程序 获取 的 服务 端 数 据 ， 服 务 端 为 此 而 提供 的 那些 服务 属于 应 用 程序 接口 

CAPI) 。 下 面 我 们 就 编写 一 点 从 服务 端 取得 ISON 数据 的 代码 。 

JSON 数据 是 从 http://localhost:8080/apis/get_ message 取得 的 ， 前 提 是 已 启动 我 们 的 Web 
程序 。 可 以 在 浏览 器 中 看 一 下 这 个 地 址 的 请 求 结果 ( 见 图 18-18) 。 
€ C B8 39 localhost 


$ " P [ ED 


(contactName" : "F& A T^, "time": 1556458409029, "content":^ Je Uit; TR? Get out!^) 


图 18-18 


浏览 器 发 现 得 到 的 数据 不 是 HTML 格式 ， 于 是 把 文本 直接 显示 了 出 来 。 在 Android 中 请 
求 这 个 地 址 的 代码 如 下 : 


private fun getJson() { 
val thread = Thread (Runnable { 
val client = OkHttpClient() 
val builder = Request.Builder() 
/LLHBLCUEEFBUBIAI, ZEBEIHIEBIBIESEES 1p Hh 
//val request = builder.url("http://192.168.3.6:8080/apis/ 
get message").build() 
// AEDA, ERRE ABI EAE 1p TAE 
val request = builder.url("http://10.0.2.2:8080/apis/ 
get_message") .build() 
try { 
val response = client.newCall (request) .execute() 
val json = response.body()?.string() 
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Log.i("getjson", json) 
) catch (e: IOException) { 
e.printStackTrace() 


) 


n 
thread.start() 
} 
此 方法 中 创建 了 一 个 线程 , 线程 中 使 用 OkHttp 的 API 访问 了 计算 机 上 的 Web 服务 器 。 注 
意 URL 中 的 主机 地 址 的 写法 : 如 果 使 用 虚拟 机 调试 ， 主 机 地 址 须 是 “10.0.2.2”， 不 要 写成 


“1localhost”， 因 为 代码 是 在 Android 虚拟 机 中 执行 ， 此 时 localhost 就 代表 了 Android 虚拟 机 
自己 ; 我 们 的 Web 程序 并 非 在 虚拟 机 中 运行 , 所 以 要 访问 计算 机 的 地 址 。 相对 于 虚拟 机 来 说 ， 
宿主 机 的 地 址 就 是 “10.0.2.2”。 如 果 是 在 实体 机 上 调试 ， 就 需要 实体 机 与 计算 机 处 于 同一 个 
局 域 网 中 。 可 以 利用 命令 找 出 PC 的 地 址 ， 如 图 18-19 所 示 。 


图 18-19 
自行 调用 方法 “getJson()”， 方 法 的 运行 结果 是 在 Logcat 中 输出 以 下 日 志 : 


I/getjson : ("contactName" : "BAP" , "time" : "2018-06-12T713:31: 
41.28140000", "content" : "我 说 啥 了 我 ? Get out!") 


但 是 ，JSON 一 般 是 来 表示 对 象 的 ， 里 面 的 数据 是 “key : value” 对 ， 从 这 堆 JSON 数据 中 
可 以 看 出 它 表示 的 是 一 个 “消息 ”， 包 含 了 消息 的 contactName (联系 人 名 字 ) ~ time (发 出 时 
lH) ~ content (消息 内 容 ) 。 我 们 应 该 把 这 个 JSON 转换 为 消息 对 象 ， 怎 么 做 昵 ?请 看 下 节 。 


18.4.4 JSON 转 对 象 


JSON 转 对 象 其 实 是 根据 JSON 中 的 数据 创建 出 类 的 实例 。 要 创建 实例 , 当然 先 要 有 类 了 ， 
我 们 根据 收 到 的 ISON 数据 可 以 定义 这 样 的 类 与 它 对 应 : 

data class ChatMessage(var contactName:String, var time:Long, var content: 
String) 

我 们 当然 可 以 在 收 到 JSON 后 先 创建 Message 类 的 对 象 , 然后 根据 JSON 中 的 Key 为 对 象 
对 应 的 属性 赋值 (这 叫 反 序列 化 ， 那 么 由 对 象 转 成 JSON 就 叫 序列 化 了 ) ， 但 是 这 个 过 程 是 比 
较 麻 烦 的 ， 因 为 需要 分 析 JSON 字符 串 、 创 建 对 象 等 。 实 现 这样 的 API 并 不 是 难事 ， 所 以 有 
很 多 专门 做 这 种 事 的 第 三 方 库 ， 比 如 fastson. Jackson. gson 等 。gson 是 Google 自己 家 的 ， 
所 以 我 们 选择 它 。 
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首先 添加 gson 的 依赖 : 


implementation 'com.google.code.gson:gson:2.8.5' 。 


gson 的 基本 用 法 很 简单 ， 直 接 将 上 节 的 方法 中 获取 JSON 的 部 分 改 为 如 下 形式 : 


try { 


val response = client.newCall (request) .execute() 

val json - response.body()?.string() 

// FIfll gson f$ ISON RJIFJIILISAES 

val gson - Gson() 

val chatMessage = gson.fromJson(json, ChatMessage::class. java) 
//A chatMessage XI St FL BE FETPXERCEETE. 

Log.i("gson", "name:$(chatMessage.contactName], 

content:$(chatMessage.content]") 

) catch (e: IOException) { 

e.printStackTrace() 


) 


运行 App， 和 触发 JSON 获取 操作 ， 在 LogCat 窗口 中 看 到 如 图 18-20 所 示 的 日 志 〈 别 忘 了 
用 “gson” 过 滤 ) ， 说 明 反 序 列 化 成 功 。 


Verbose v | Q gson 


ator ,threaddemo I/gson: name: 路 人 甲 ,content: 我 说 喻 了 我 ? Get out! 


图 18-20 
18.4.5 ”使 用 OkHttp 上 传 文件 uu 


我 们 在 网 页 中 经 常会 看 到 上 传 文件 的 功能 ( 见 图 18-21) 。 页 Product - Create 
面 中 要 上 传 很 多 信息 ，“ 图 片 ”这 一 栏 用 于 选择 一 个 本 地 文件 ， €— | 
当 用 户 单 击 “Create” 按 钮 时 , 所 有 信息 被 打包 上 传 到 服务 端 。 这 à 
种 功能 是 通过 Multipart 表单 方式 打包 数据 并 上 传 的 ， 这 种 数据 对 
应 的 MIME 为 “multipart/form-data”。 我 们 编写 App 代码 上 传 文 
件 时 ， 也 需要 构建 出 这 种 数据 。 

在 实现 这 个 功能 之 前 ， 应 先 找 一 个 文件 用 于 上 传 。 我 们 项 目 
中 的 资源 文件 在 打包 成 APK 安装 包 时 都 会 被 包含 在 里 面 , 安装 时 
就 会 放 到 Android 设备 中 。 一 般 资源 文件 不 容易 直接 读 出 它们 的 
数据 (被 Android 的 资源 访问 API 隔离 了 ) ， 而 有 一 种 特殊 的 资 图 18-21 
源 文 件 可 以 ， 那 就 是 Raw (原始 类 型 的 资源 ) 。 这 种 资源 不 会 被 处 理 ， 会 原封 不 动 地 放 到 设 
备 中 。 所 以 ， 我 们 要 添加 一 个 Raw 类 型 资源 。 要 添加 这 种 资源 ， 应 先 添加 Raw 文件 夹 ， 如 图 
18-22 所 示 。 然 后 找 一 幅 图 像 文 件 ， 放 到 raw 文件 夹 下 〈 见 图 18-23) 。 
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® Ne 


Directoryname: raw 


fece cc E 


Sourceset [main 7 


Available qualifiers: Chosen qualifiers: 
©: Network Code 

@ Locale 

S Layout Direction 

E Smallest Screen Width 


E Screen Width 
© C| cen 
图 18-22 
文件 上 传 的 代码 如 下 : 


private fun uploadOneFile() ( 
/ LUE RE CRIE, EIS 
val thread = Thread (Runnable ( 
var msg: String? - null 
try { 
IRAE 
//val url = "http://10.0.2.2:8080" 
val url = "http://192.168.3.13:8080" 
//Él& fj multipart form PPIÆRN R 
val builder = MultipartBody.Builder() 
// EIE" multipart/form-data" 
builder.setType (MultipartBody. FORM) 
[BERANE EMARIA MRE 
/ LS ISTE AI — I Part, €f part IA HTTP HI body 
LB MESSER. Part HEF, ET EUST MEI DIEI Part 
builder.addFormDataPart("userName", "xxxxx") 
//M Raw REBRA IDEE, AEE REKE PRE 
val ins = resources.openRawResource (R.raw.tetris) 
V1 HFEEKHEF 
val imgData = ByteArray(ins.available()) 
// EX THIHESIEE EE 
ins.read(imgData) 
// 8l& —f body, JEIEEEIRX THUI/SE, fEXy Multipart X5 body HI — 8E 
val body - RequestBody.create(null, imgData) 
//iIll Part, S PESCE Part HEF, EL NBSOBBUN IHE T. 
// HX ÉESUB Part HRE 
builder.addFormDataPart("file", "tetris.jpg", body) 
// 8I& &l A FÉ, Part fff RequestBody 
val body = builder.build() 
//8/& client URHRR 
val client = OkHttpClient () 


//8l& Request, L POST ZA HO 
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val request = Request.Builder().url(url).post (body).build() 
// FI Web Er ÊREHR 
client.newCall (request) .execute () 
] catch (e: Exception) { 
msg = e.localizedMessage 
) 
n 
/LBBIEEER. ERG EREZEEHEP AT! ! 
thread.start() 
} 


在 这 段 代码 中 ， 需 要 注意 的 是 构建 Multipart Form 使 用 了 addFormDataPart() 方 法 ， 并 且 
HTTP 请 求 的 Method 是 POST. 

运行 App, 触发 这 个 方法 执行 ,上传 成 功 后 可 以 通过 浏览 器 在 主页 (http://localhost:8080) 
中 看 到 已 上 传 的 文件 〈 见 图 18-24) 。 


Y Trapp 
> B manifests 
> mm < C 88 ,全 localhost 
v res — 
> Ba drawable @ Seaborn, Ansible, | E] AndroidDevTools- E 
> a layout 
au File to upload: | zE Z(E | 未 选择 任何 文件 
w Draw 
E tetrisjpg. Upload 
> Da values T 
Y (Ò Gradle Scripts * http: d isjpg 
{È build .gradle (Project: ThreadDemo) 


图 18-23 18-24 


15,5 使 用 Retrofit 进行 网 络 通信 


Retrofit 是 另 一 个 Java HTTP 通信 库 。 前 面 不 是 讲 了 OkHttp 吗 ， 感 觉 挺 好 用 的 ， 为 什么 又 

讲 一 个 库 呢 ? 这 是 因为 Retrofit 比 OkHttp 使 用 起 来 还 简单 ， 而 且 支 持 当前 流行 的 注解 方式 。 
注意 ，Retrofit 是 基于 OkHttp 创建 的 ， 对 OkHttp 进行 了 进一步 的 封装 ， 用 起 来 更 简单 。 
下 面 我 们 就 用 Retrofit 实现 一 下 前 面 用 OkHttp 实现 的 功能 。 


18.5.1 加 入 Retrofit 的 依赖 项 


如 何 添加 依赖 项 呢 ? 首先 去 它 的 官网 (https://square.github.io/retrofit/) ,会 看 到 如 图 18-25 
所 示 的 内 容 。 单 击 链接 进入 “https:Wgithub.comy/square/retrofit”, 发 现 如 图 18-26 所 示 的 内 容 。 


The source code to the Retrofit, its samples, and this website is available on GitHub. 


18-25 
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Retrofit 


|Type-safe HTTP client for Android and Java by Square, Inc. 


For more information please see the website. 
Download 


Download the latest JAR or grab from Maven central at the coordinates] cos. sauareup.retro£it2:retrofit:2.5.0 
[Snapshots of the development version are available in Sonatype's snapshots repository. 


Retrofit requires at minimum Java 7 or Android 2.3. 


18-26 
在 模块 build.gradle 文件 中 加 入 如 下 代码 : 


implementation 'com.squareup.retrofit2:retrofit:2.5.0' 
由 于 它 要 依赖 OkHttp， 因 此 也 要 加 入 OkHttp 的 依赖 项 (OkHttp 我 们 前 面 已 经 添加 了 ) 。 
18.5.2 ”用 Retrofit 下 载 文本 


我 们 把 前 面 OkHttp 下 载 JSON 文本 并 转换 成 对 象 的 功能 用 Retrofit 试 一 下 。 

首先 我 们 要 创建 一 个 接口 ,在 接口 中 定义 方法 。 这 些 方法 分 别 负责 访问 服务 端的 某 个 地 址 ， 
从 这 个 地 址 下 载 数据 并 返回 给 调用 者 。 比 如 使 用 OkHttp 下 载 JSON 时 ， 它 先 建立 网 络 连接 ， 
再 发 出 请 求 ， 然 后 将 请 求 到 的 JSON 文本 转 成 对 象 。 这 个 过 程 在 Retrofit 中 就 对 应 我 们 定义 在 
接口 中 的 一 个 方法 ， 但 与 OkHttp 不 同 ， 此 时 只 需要 定义 接口 ， 而 不 需要 实现 它 ， 因 为 它 的 实 
现 由 Retrofit 来 完成 〈 这 就 是 我 们 少 写 很 多 代码 的 原因 ) 。 但 是 我 们 要 告诉 Retrofit 这 个 接口 
要 访问 服务 端的 哪个 地 址 ， 是 用 GET 还 是 POST， 甚 至 更 多 网 络 参数 ， 这 部 分 用 注解 来 做 。 
具体 看 下 面 这 个 接口 : 


import retrofit2.Call 
import retrofit2.http.GET 


interface ChatService { 
@GET ("/apis/get message") 
fun getChatMsg(): Call«ChatMessage» 
) 
需要 注意 的 是 getChatMsg() 方 法 的 返回 值 类 型 必须 为 retrofit2.Call. Call 是 一 个 范 型 ， 需 
要 为 它 传 入 一 个 类 型 参数 。 这 个 参数 表明 HTTP 包 的 body 中 是 什么 数据 ， 比 如 接口 中 的 
getChatMsg0 方 法 ， 从 名 字 就 可 以 看 出 它 要 获取 一 条 聊天 信息 ， 所 以 服务 端 返回 的 数据 就 是 聊 
天 信息 ChatMessage， 我 们 可 以 通过 特定 的 方法 很 方便 地 将 此 数据 取出 。 
还 要 注意 注解 的 内 容 : GET 表示 使 用 HTTP GET 命令 获取 数据 ，“/apis/get_message” 表 
示 服 务 端 响应 请 求 的 路 径 ， 它 最 终 与 服务 端的 主机 地 址 (就 是 后 面 代码 中 现 的 
"http://10.0.2.2:8080/") 组 成 URL 地 址 “http://10.0.2.2:8080/apis/get_message”。 
现在 可 以 使 用 这 个 接口 获取 数据 了 ， 当 然 得 通过 Retrofit 使 用 才 行 ， 代 码 如 下 : 
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private fun getJsonByRetrofit() { 

//Bl& Retrotit WR, ARE MEIHA 

val retrofit = Retrofit.Builder() 
-baseUrl("http://10.0.2.2:8080/") // AEPA KIE BLAUE 
-build() 

//Retrofit IRIE TE LISEBIZSJEBIRESUPI, 1X TEIE T RIASTUSHIUR. 

val service - retrofit.create(ChatService::class.java) 

11 BAEO, T EE BTE SI AS TUBEXS PEA 

11ER ER RA ENT AAi» 

/LRURÉI& T -AFARA Call<ChatMessage>Jj& 

val call = service.getChatMsg() 

try { 
// FI call RHH R, IUBE IRIPIH. CERE — f Response XR 
// 3H Response«ChatMessage!», (HÖRS Call 一 至 ) 
val response - call.execute() 
val message - response.body() 
/LHEHSIPRHILT FEE 
Log.i("retrofitDemo", 

"name:$(message!!.contactName),content:$(message.content)") 

} catch (e: IOException) ( 
e.printStackTrace() 

) 

) 


这 段 代 码 涉及 网 络 通信 ， 所 以 要 开 线 程 执行 。 

注意 通过 response.body0 获 取 HTTP body 中 的 数据 ， 返回 的 是 ChatMessage 对 象 ， 也 就 是 
说 Retrofit 直接 把 JSON 文本 转 成 对 象 了 。 运 行 这 段 代码 注意 Web 程序 必须 先 运行 起 来 ) ， 
会 出 现 什么 呢 ? Jit! 为 什么 出 现 崩 省 呢 ? 因为 我 们 少 做 了 一 步 : 指定 数据 转换 工厂 。 默认 情 
WF, Retrofit 并 不 会 把 数据 转换 成 实际 所 表示 的 对 象 ， 而 需要 我 们 告诉 它 如 何 去 转 换 。 如 何 
告诉 它 呢 ? 只 需 在 构建 Retrofit 对 象 时 添加 一 个 转换 工厂 对 象 即 可 : 

val retrofit = Retrofit.Builder() 

-baseUrl("http://10.0.2.2:8080/") //ÍE/ZAETIBIBI A EHIH AE 


.addConverterFactory (GsonConverterFactory.create()) 
-build() 


可 以 看 到 添加 了 一 个 GsonConverterFactory 对 象 , 它 是 利用 gson 库 将 JSON 转换 成 对 象 的 。 
要 使 用 这 个 类 ， 需 要 添加 gson 库 的 依赖 和 converter-gson 库 的 依赖 : 


implementation 'com.google.code.gson:gson:2.8.5' 


implementation 'com.squareup.retrofit2:converter-gson:2.5.0' 


gson 的 官网 地 址 是 https;//github.com/google/gson. converter-gson 的 官网 地 址 是 https://github.com 
/square/retrofit/tree/master/retrofit-converters/gson. 
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运行 试 试 ， 是 不 是 得 到 消息 了 ? 对 比 一 下 OkHttp 代码 ， 是 不 是 省 事 不 少 呢 ? 
18.5.3 ”用 Retrofit 下 载 图 像 
首先 在 接口 ChatService 中 添加 新 的 方法 : 


GGET ("/image/a.jpg") 
fun getImage(): Call«ResponseBody^ 


获取 图 像 的 路 径 是 “image/a.jpg”。 服 务 端 给 我 们 返回 的 是 这 个 图 像 的 数据 ， 由 于 不 是 文 
本 ， 因 此 以 二 进 制 字 节 数组 形式 返回 。 注 意 ， 此 方法 的 返回 类 型 Call 的 范 型 参数 是 
ResponseBody， 如 果 不 想 使 用 转换 工具 自动 转换 HTTP body 中 的 数据 ， 那 么 HTTP body 就 需 
要 用 ResponseBody 来 代表 。 这 里 不 需要 对 body 中 的 数据 进行 转换 ,因为 我 们 要 自己 处 理 那些 
二 进 制 数 据 。 

下 一 步 需 要 在 MainActivity 中 添加 方法 以 下 载 图 像 : 


private fun getOneImage() ( 
val thread - Thread(Runnable ( 

//8l& Retrofit HR, HARE MEIH 

val retrofit = Retrofit .Builder () 
//.baseUrl("http://10.0.2.2:8080/") //Í[E/IETRBLM RIEDHA 
-baseUrl("http://192.168.3.13:8080/") //ÍÉ/NSEIEBLIH f) 3E BLA AL 
-build() 

//Retrofit KE Et LTSUWASJEOIEE SEP, BEHTSTASTUBHEUR 

val service = retrofit.create (ChatService::class.java) 

val call = service.getImage() 

try ( 
val response - call.execute() 
//response.body () À&[/HÉj& ResponseBody HR, M E EEXEIC—M f T A JE, 
/ HUISSCHLA EBURUIUE uTTP. body HAR, HERR UEBIRGE 
val bmp - BitmapFactory.decodeStream(response.body()!!. 

byteStream()) 


/HEEHEDIEBBIBSIB Imageview 
val handler - Handler (mainLooper) 
handler.post ( imageViews[0]?.setImageBitmap (bmp) } 


) catch (e: IOException) ( 
e.printStackTrace() 
} 
»n 


thread.start() 
} 


注意 ， 与 获取 聊天 消息 不 同 的 是 ， 并 没有 为 Retrofit 对 象 设置 转换 工厂 ， 因 为 Retrofit Jf 
没有 提供 将 二 进 制 数据 转 成 Bitmap 的 类 ， 所 以 就 不 添加 了 ， 由 我 们 自己 完成 转换 过 程 。 


363 


Android 10 Kotlin 编程 通俗 演义 


18.5.4 用 Retrofit 上 传 图 像 


在 手机 上 的 运行 效果 如 图 18-27 所 示 。 


首先 在 接口 中 添加 一 个 文件 上 传 的 方法 : 


@Multipart 
&POST ("/") 
fun uploadImage ((Part filedata: MultipartBody.Part): 


Call«ResponseBody» 


“@Multipart” 表 明 以 multipart-form 的 形式 打包 要 上 传 的 数据 ，“@POST("")” 表 示 以 
POST 方式 发 出 请 求 , 这 是 必需 的 ,因为 GET 方式 无 法 上 传 大 量 数据 ,其 参数 表示 请 求 路 径 ， 

“/” 表 示 根 路 径 。 为 什么 是 根 路 径 呢 ? 因为 服务 端 就 是 在 根 路 径 接收 文件 的 〈 这 是 由 服务 端 
的 作者 定 的 ) 。 此 方法 的 参数 是 一 个 MultipartBody.Part， 也 就 是 说 使 用 此 方法 时 要 先 创建 一 
个 MultipartBody.Part 对 象 。 
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示例 代码 如 下 : 


private fun uploadOneFileByRetrofit() { 


/ LUE EEEPEERE, IIIA 
val thread - Thread(Runnable ( 
val retrofit - Retrofit.Builder() 


显示 提示 URAR 访问 网 页 


18-27 


//.baseUrl("http://10.0.2.2:8080/") //TEIHAETIBIBI BO 3E BLIEAL 
-baseUrl("http://192.168.3.13:8080/") //ÍÉ/HSEIK PLI Ig 3-ELIAL 


-build() 


val service = retrofit.create(ChatService::class.java) 


var inputStream: InputStream? 
try ( 
// M Raw KAR RMR E 


inputStream - resources.openRawResource (R.raw.tetris) 


/ LUE BEXHUAEDP, XHA CHEER RAE 


val data = ByteArray(inputStream.available()) 
inputStream.read (data) 


/LUBUB X HHE — f RequestBody, 


// MIME Æ application/otcet-stream, Ag UEBER 


val requestFile - RequestBody.create( 


MediaType.parse("application/otcet-stream"), data 


) 

// Ifl RequestBody Él/& —f: Part 

val part = MultipartBody.Part.createFormData( 
"file", "trtes.jpg", requestFile 

) 

// W/ll Service PER, LffitMultiPart 248 

val call = service.uploadImage (part) 

VIETA TERME 


val response - call.execute() 
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// AERE HT 
val body - response.body() 
Log.i("response", body!!.string()) 
) catch (e: IOException) ( 
e.printStackTrace() 
) 
n 


11DE, EEG CÆEEREPHIT!! 
thread.start() 
} 


注意 对 方法 MultipartBody.Part.createFormData() 的 调用 。 此 方法 的 作用 是 创建 MultiPart 中 
的 一 个 Part。 我 们 传 入 了 三 个 数 : 第 一 个 参数 是 Key (表单 中 的 数据 是 以 Key-Value 的 形式 存 
放 的 ) ; 第 三 个 参数 是 Value， 是 一 个 Part 对 象 ; 第 二 个 参数 只 有 在 创建 存放 二 进 制 数据 的 
Part 时 才 用 到 , 创建 文本 Part 时 用 不 到 。 第 二 个 参数 的 作用 是 指明 上 传 文件 的 名 字 , 一 般 情况 
下 服务 端 收 到 上 传 文件 后 都 会 改名 , 所 以 这 个 文件 名 参数 更 大 的 作用 在 于 其 扩展 名 , 因为 扩展 
名 指出 了 文件 的 格式 ， 比 如 这 里 是 “JPG”， 服 务 端 收 到 后 可 以 根据 这 个 扩展 名 正确 地 解码 图 
像 ， 或 使 改名 后 的 文件 依然 有 正确 的 扩展 名 。 

当 它 成 功 执 行 后 ， 在 Web 程序 根 路 径 下 的 upload-dir 中 会 出 现 一 幅 图 像 ( 见 图 18-28) 。 
同时 ， 在 浏览 器 中 查看 Web 程序 的 主页 ， 可 以 看 到 上 传 的 图 像 〈 见 图 18-29) 。 


< C BB OG localhost 
MB > work(F) > workspace > QQAppserver-master > upload-dir € Seaborn, Ansible, L 国 AndroidDevTol 
File to upload: ZEU | 未 选择 任何 文件 
* B Upload 
本 : 
* e http;//localhost.:8080/files/aaa jpg 
aoojpg 
图 18-28 图 18-29 


到 此 为 止 ， 基 本 的 网 络 通信 技术 就 讲 完了 。 
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写 了 很 多 与 多 线程 有 关 的 代码 ,不 知 你 是 否 对 多 线程 的 使 用 感到 烦琐 ? 在 多 线程 切换 时 万 
其 如 此 。 如 果 有 一 套 API， 可 以 让 我 们 在 编写 多 线程 代码 时 不 用 创建 线程 对 象 ， 而 直接 指定 一 
个 方法 在 哪个 线程 运行 ， 自 动 将 一 个 线程 的 结果 扔 到 另 一 个 线程 中 就 像 AsyncTask 那样 ) ， 
只 关注 业务 实现 而 感觉 不 到 线程 的 存在 , 那 该 多 么 美好 ! 有 时 美好 的 事情 真 会 发 生 ! 下 面 隆重 
推出 已 练 成 “乾坤 大 挪移 第 九 层 ” 的 异步 调用 框架 库 : RxJava! 其 官网 地 址 为 
https://github.com/ReactiveX/RxJava。 

RxJava 已 经 历 了 两 代 ， 当 前 有 Lx 和 2.x 两 个 版 本 。 我 们 讲 2.x 版 。 要 想 使 用 它 ， 还 是 先 
加 入 其 依赖 项 : 


implementation 'io.reactivex.rxjava2:rxjava:2.2.8' 


注意 ， 其 最 新 的 版 本 号 可 以 在 官网 看 到 〈 见 图 19-1) 。 


Setting up the dependency 


The first step is to include RJava 2 into your project, for example, as a Gradle compile dependency: 


ánplenentation "ic.reactivex.rxjava2:rxjava:2.x. y" 


—— i iin r———— 3 


图 19-1 


159.1. 小 试 牛刀 


下 面 我 们 请 RxJava 给 大 家 亮点 小 招式 ， 什 么 招式 呢 ? 先 来 改写 一 下 18.5.3 节 中 下 载 图 像 
的 代码 。 改 写 后 的 代码 如 下 : 


private fun getOneImageRxJava()í( 
Observable.create(ObservableOnSubscribe«Bitmap» ( emitter -> 
//Élit Retrofit HR, HARZ mE A 
val retrofit = Retrofit.Builder() 
//.baseUrl ("http://10.0.2.2:8080/") //ÍEJIIE PUBL ELE BUM AL 
-baseUrl("http://192.168.3.13:8080/") //ÍÉ/HSCIEBIBI BO EHHH 
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-build() 
//Retrofit IRÍE t LISEBIZSJEBIEE SEDI, BA T RASTURHUR. 
val service = retrofit.create(ChatService::class.java) 
val call = service.getlImage() 
val response - call.execute() 
//response. body () X&[9Jfj/& ResponseBody HR, ME EEXEIC—M f HR A E, 
//IĞ VEPRA HERH HTTP body HAR, BERR RRE 


val bmp = BitmapFactory.decodeStream(response.body()!!.byteStream()) 


emitter .onNext (bmp) 
emitter.onComplete () 
}) .subscribeon (Schedulers .computation()) 
.subscribe (object : Observer<Bitmap> ( 
override fun onSubscribe (d: Disposable) { 


} 


override fun onNext (bitmap: Bitmap) { 
//imageViews [0] .setImageBitmap (bitmap) ; 
Log.w("rxjava", "onNext()") 

} 

override fun onError (e: Throwable) { 
Log.e("rxjava", e.localizedMessage!!) 


} 
override fun onComplete() { 
} 
H) 
} 
RxJava 的 招式 比 起 原来 还 要 烦琐 ， 表 演 失败 了 吗 ? 还 不 敢 下 结论 ， 我 们 还 是 先 仔细 看 一 
下 它 做 了 什么 。 
首先 它 调用 Observable.create() 方 法 创建 了 一 个 Observable 对 象 ， 创 建 时 传 入 了 一 个 名 为 
ObservableOnSubscribe 的 对 象 ， 这 个 对 象 主要 是 包 着 一 个 方法 : subscribe) GEW) 。 在 这 个 
方法 中 借助 Retrofit 下 载 了 一 幅 图 像 (注意 ， 这 里 使 用 了 Lambda 语法 ， 所 以 看 不 到 “override 
fun subscribe” 这 样 的 语句 ) ， 这 个 图 像 需要 传 到 主线 程 中 ， 但 这 里 只 是 用 图 像 作为 参数 调用 
了 emitter.onNext() 方 法 , 将 数据 扔 到 了 另外 的 线程 中 (当然 也 可 以 扔 到 当前 线程 中 了 ) o emitter 
是 subscribe() 方 法 的 参数 ， 是 别人 传 进来 的 。 我 们 不 用 管 是 谁 传 的 ， 只 需要 知道 它 是 用 于 扔 出 
数据 的 就 行 。 它 还 调用 了 onComplete0， 这 个 并 没有 扔 出 什么 数据 ， 而 是 扔 出 了 一 个 事件 ， 表 
示 所 有 的 数据 都 扔 完了 。 
再 往 下 看 , 创建 完 Observable 对 象 之 后 ， 调 用 了 它 的 方法 subscribeOn()， 用 于 指定 订阅 活 
动 (也 就 是 ObservableOnSubscribe 的 方法 subscribe) 在 哪个 线程 中 进行 ， 如 果 没 有 这 一 步 ， 
就 在 当前 线程 中 进行 〈 因 为 要 访问 网 络 ， 所 以 必须 指定 在 后 台 线程 中 完成 订阅 活动 ) 。 
subscribeOnO 的 参数 是 一 个 Schedulers 对 象 ， 其 实 也 不 必 深 究 它 是 什么 ， 可 以 认为 它 就 代表 线 
程 ，Schedulers.computation() 表 示 后 台 线 程 。 
最 后 调用 了 Observable 对 象 的 subscribe0 方 法 (注意 与 ObservableOnSubscribe 中 的 
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subscribeO 进 行 区 分 ) ， 为 此 方法 传 入 了 一 个 Observer (观察 者 ) 对 象 ， 这 个 对 象 的 主要 作用 
是 包含 4 个 方法 : onSubscribe0，onNext0，onError0，onComplete0。Observer 用 于 接收 emitter 
的 方法 扔 出 的 数据 和 其 他 事件 。onNextO 用 于 接收 emitter.onNext0 发 出 的 数据 。onError0 用 于 
接收 在 ObservableOnSubscribe 的 subscribe() 中 抛 出 的 异常 。onComplete0 用 于 接收 
emitter.onComplete() 发 出 的 事件 。onSubscribeO 在 订阅 发 生 时 先 被 调用 ， 也 就 是 在 onNext0 等 
方法 之 前 。 

总 之 , 这 个 Observer 是 用 来 接收 Observable 中 产生 的 数据 的 (这 个 动作 被 称 作 “ 观 察 ”， 
Observe) 。 可 以 指定 “观察 ”动作 运行 于 哪个 线程 ， 这 里 没有 指定 ， 所 以 运行 在 “订阅 ” 动 
作 相 同 的 线程 (Schedulers.computation()) 中 。 

在 Observer 的 onNext0 中 并 没有 将 传 入 的 Bitmap 显示 在 ImageView 控件 中 ， 如 果 要 这 样 
做 ,就 要 指定 观察 动作 发 生 在 主线 程 中 。 要 创建 代表 主线 程 的 Schedulers 对 象 ， 需要 依赖 男 一 
个 库 RxAndroid。 其 官网 地 址 为 https://github.com/ReactiveX/RxAndroid， 可 以 在 此 页 面 看 到 最 
新 版 本 。 

加 入 RxAndroid 依赖 项 : 


implementation 'io.reactivex.rxjava2:rxandroid:2.1.1' 


然后 ， 对 代码 稍 做 改动 (注意 粗 体 部 分 〉: 


)).subscribeOn(Schedulers.computation()) 
.observeOn (AndroidSchedulers.mainThread()) 
.Subscribe (object : Observer<Bitmap> { 

override fun onSubscribe(d: Disposable) ( 


} 


override fun onNext (bitmap: Bitmap) { 
imageViews [0]? .setImageBitmap (bitmap) 
} 


运行 App, 是 不 是 成 功 显示 出 了 图 像 ? 但 是 , 当前 所 获取 图 像 的 地 址 是 固定 的 ( 即 不 可 变 )， 
见 ChatService 接口 中 gettmage0 的 注解 : 

&GET ("/image/a.jpg") 

fun getImage (): Call«ResponseBody» 

如 果 “/image” 路 径 下 有 多 个 图 像 文件 , 难 不 成 要 为 每 个 文件 定义 一 个 getImage 方法 ? 74 
然 不 行 ! 我 们 应 该 为 getImage0 方 法 添加 参数 ， 通 过 这 个 参数 传 入 图 像 文件 的 名 字 ， 但 注解 中 
的 路 径 中 必须 依然 体现 出 文件 名 部 分 ， 并 且 表 明文 件 名 是 可 变 的 。Retrofit 早已 考虑 到 这 种 需 
求 ， 我 们 只 需 修 改 这 个 方法 为 : 

GGET ("/image/(file name}") 


fun getlImage(8Path("file name") fileName:String): Call«ResponseBody»^ 


在 调用 getImage0 方 法 时 传 入 一 个 文件 名 , Retrofit 就 会 用 方法 名 代 蔡 “ (file name}” 部 分 。 
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把 调用 getImage0 的 代码 改 为 如 下 方式 : 
val call = service.getImage ("a.jpg") 


在 Observable 的 subscribe() 方 法 被 调用 之 前 ,ObservableOnSubscribe 的 subscribe() 77 i3 (Jl 
在 是 Lambda 的 形式 ， 所 以 看 不 到 方法 名 ) 是 不 会 执行 的 ， 是 订阅 动作 触发 了 一 切 。 在 订阅 发 
生 之 前 ， 那 些 Lambda 只 是 被 设置 给 Observable， 而 不 会 执行 ! 

到 此 为 止 ， 我 们 发 现 RxJava 真 的 会 “乾坤 大 挪移 ”， 因 为 使 用 它 时 不 用 再 做 创建 线程 、 
用 Handler 向 主线 程 扔 代码 之 类 的 事 。 现 在 代码 量 还 是 很 多 ,有 没有 办 法 少 码 字 呢 ? 和 欲 知 答案 ， 
请 看 下 节 分 解 。 


19.2 精简 发 送 代码 


Observable 是 发 出 数据 或 事件 的 对 象 ，Observer 是 接收 事件 的 对 象 ， 但 是 在 到 达 Observer 
之 前 数据 是 可 以 被 预 处 理 的 ， 即 一 种 数据 可 能 被 转换 为 另 一 种 数据 再 传 给 Observer。 比 如 下 载 
图 像 的 功能 ， 最 初 的 数据 其 实 是 一 个 网 址 〈 字 符 串 ) ， 通 过 对 网 址 的 处 理 〈 也 就 是 从 它 指向 服 
务 器 地 址 下 载 图 像 数 据 ， 并 在 收 到 后 转换 为 图 像 ) 数据 变 成 了 图 像 。Observer 收 到 的 是 最 后 的 
数据 , 也 就 是 图 像 , 于 是 把 图 像 在 UI 中 显示 出 来 。 按照 这 个 理念 改写 上 一 节 的 代码 , 具体 如 下 : 


private fun getOneImageRxJava() { 
Observable.just ("http://192.168.3.13:8080/") 
-map(Function«String, Bitmap» ( 
//ül& Retrofit HR, ARB A END AL 
val retrofit - Retrofit.Builder().baseUrl(it).build() 
//Retrofit RE LTS WAS JEJRESEBI, BA T EIS UBER 
val service = retrofit.create(ChatService::class.java) 
val call = service.getImage ("a.jpg") 
val response - call.execute() 
//response.body () À&[Iffi ResponseBody HR, ME EEXE — f 3 T A Ji, 
/ HIST A IEBURUIUE uTTP. body HAR, BEES -HRE 
BitmapFactory.decodeStream(response.body()!!.byteStream()) 
n 
-subscribeOn (Schedulers.computation()) 
-ObserveOn(AndroidSchedulers.mainThread()) 
.Subscribe (object: Observer<Bitmap> { 
override fun onSubscribe(d: Disposable) ( 


) 


override fun onNext(bitmap: Bitmap) ( 
imageViews[0]?.setiImageBitmap (bitmap) 
H 


override fun onError(e: Throwable) ( 
Log.e("rxjava", e.localizedMessage!!) 
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) 


} 


override fun onComplete() { 
) 
}) 


看 出 哪里 不 同 了 吗 ? Observable 对 象 的 创建 使 用 了 另 一 个 工厂 方法 just0， 表 示 用 数据 直 
接 创建 。 随 后 是 一 个 奇怪 的 方法 mapo, map 是 映射 的 意思 ， 就 是 把 一 种 数据 映射 成 另 一 种 数 
据 。 它 的 参数 是 一 个 Function HR, 主要 作用 是 包含 回调 方法 apply0， 完成 对 数据 的 转换 (我 
们 已 经 简化 成 了 Lambda) 。 注 意 它 的 返回 值 类 型 和 参数 类 型 必须 与 Function 的 范 型 参数 对 应 
Function<String, Bitmap»: 第 一 个 参数 是 输入 数据 的 类 型 ， 也 就 是 方法 的 参数 类 型 ， 第 二 个 参 
数 是 输出 数据 的 类 型 ， 也 就 是 方法 的 返回 值 类 型 。 方 法 内 的 代码 就 不 做 解释 了 ， 看 注释 即 可 。 

跟前 面 说 过 的 一 样 ， 在 订阅 发 生 之 前 ，map0 方 法 不 会 被 执行 ， 只 是 把 回调 方法 设置 给 


Observable， 当 订阅 发 生 时 (Observable 的 subscribe0 执 行 时 ) ，map0 才 会 被 执行 ，map 返回 


的 数据 最 终 会 被 扔 到 Observer 中 。 方法 map(0 在 哪个 线程 中 执行 呢 ? 肯定 不 是 在 Observe 线程 
中 执行 (因为 只 有 Observer 中 的 回调 方法 才 在 Observe 线程 中 执行 )， 那 就 是 在 订阅 线程 中 执 


行 了 。 


实际 上 ,map0 调 用 的 代码 还 可 以 精简 ,这 得 益 于 Kotlin 强大 的 推测 能 力 , 连 Function<String, 
Bitmap> 这 块 都 可 以 省 掉 : 
//Observable.just("http://192.168.3.13:8080/") 


Observable.just ("http://10.0.2.2:8080/") 
.map { 


) 


//ül& Retrofit HR, URE EBD AL 

val retrofit - Retrofit.Builder().baseUrl(it).build() 

//Retrofit HEB LSU ADZSJEIEE SUP, BA T RIASTUBHEUR 

val service = retrofit.create(ChatService::class.java) 

val call = service.getImage ("a.jpg") 

val response - call.execute() 

//response.body () À&[IÉjE ResponseBody HR, M E EHEXEIC — f 3 Tl A W 
LH EEUU HTTP body HAR, HÆR KI RRE 


BitmapFactory.decodeStream(response.body()!!.byteStream()) 


-subscribeOn (Schedulers.computation()) 


总 之 ，RxJava 中 处 理 数据 的 框架 就 是 一 个 串 ， 会 串 起 一 个 个 回调 方法 ， 把 数据 最 后 扔 给 
Observer。 实 际 上 这 些 回调 方法 不 一 定 都 用 于 处 理 数 据 ， 有 的 可 以 过 滤 数 据 。 
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3 精简 接收 代码 


Observable 的 subscribe0 方 法 有 多 个 重 载 的 形式 (Java 代码 ) : 
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* public final Disposable subscribe(); 

* public final Disposable subscribe(Consumer-? super T> onNext); 

* public final Disposable subscribe(Consumer-? super T> onNext, Consumer-? super 
Throwable- onError); 

* public final Disposable subscribe(Consumer-? super T> onNext, Consumer-? super 
Throwable- onError,Action onComplete); 

* public final Disposable subscribe(Consumer-? super T> onNext, Consumer-? super 
Throwable> onError,Action onComplete, Consumer-? super Disposable» onSubscribe); 

* public final void subscribe(Observer-? super T> observer); 


第 6 个 方法 是 我 们 已 在 代码 中 使 用 的 。 

前 面 几 个 方法 的 参数 类 型 值得 研究 ， 有 的 是 Consumer， 有 的 是 Action， 那 么 它们 都 是 什 
么 呢 ? 它们 都 是 接口 , 且 只 包含 一 个 回调 方法 ， 当 然 这 个 回调 方法 才 是 重点 〈 其 实 这 样 的 方法 
在 Java 8 中 有 个 名 字 , 叫 “ 函 数 接口 ”) 。 根 据 参数 的 名 字 就 可 以 知道 这 个 回调 方法 的 作用 : 
onNext 对 应 Observer 的 onNext0，onError 对 应 Observer 的 onError0，Complete 对 应 Observer 
的 onComplete()。 

其 实 很 多 时 候 我 们 只 需要 提供 onNext 回调 即 可 ， 也 就 是 使 用 第 2 个 方法 ， 所 以 上 一 节 的 
代码 中 调用 subscribe() 的 代码 可 以 改 为 : 

.Subscribe (object : Consumer<Bitmap>{ 

@Throws (Exception: :class) 
override fun accept (bitmap: Bitmap) { 
imageViews [0]? .setImageBitmap (bitmap) 
} 
) 


既然 使 用 了 Kotlin， 就 要 精简 到 极致 ， 所 以 最 终 把 它 变 成 了 这 样 : 


.Subscribe ( bitmap -> imageViews[0]?.setImageBitmap (bitmap) } 


1 9.4 map 5 flatmap 


RxJava 中 的 map 操作 主要 用 于 数据 转换 。 如 果 构 建 Observable 时 传 给 它 的 是 一 堆 数据 而 
不 是 一 个 ， 那 么 map 可 以 对 每 一 条 数据 进行 相同 的 转换 ， 然 后 Observer 可 以 接收 转换 后 的 每 
一 条 数据 。 其 实 这 也 没什么 神奇 的 ， 底 层 不 过 是 多 次 调用 了 onNext0 一 条 条 扔 出 的 数据 罢了 。 
看 下 面 这 个 小 例子 : 
Observable.range(1, 10) 
-observeOn (Schedulers.computation()) 
.-mpí(ív-»v*v)] 
.subscribe ( printin(it) } 
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解释 一 下 这 段 代码 : 使 用 另 一 个 工厂 方法 range0 构 建 一 个 Observable 实例 ， 此 工厂 方法 
的 作用 是 通过 两 个 整数 指定 一 个 范围 ，Observable 会 依次 发 出 这 个 范围 内 的 所 有 整数 。 


map(O 的 参数 


每 个 整数 计算 其 


是 一 个 Lambda, 表示 将 参数 v 进行 平方 运算 并 返回 算出 的 值 , 也 就 是 说 会 对 
FF 方 。subscribe() 的 参数 不 是 一 个 Lambda, 而 是 一 个 全 局 方法 。 由 于 一 次 扔 给 


观察 者 一 个 数据 ， 而 printin0 方 法 可 以 接收 一 个 参数 ， 所 以 以 printIn0 作 为 onNext 对 应 的 回调 


方法 是 没有 问题 的 。 


但 是 , 如果 为 Observable 输入 的 数据 只 有 一 条 , 在 处 理 完 这 条 数据 之 后 产生 了 多 条 数据 ， 
而 我 们 又 希望 将 这 些 数据 逐条 扔 给 Observer 来 处 理 ,那么 能 不 能 像 处 理 一 条 数据 一 样 让 RxJava 
一 口气 完成 这 个 过 程 呢 ? 没 问题 ! 先 上 代码 再 解释 : 
private fun getImagesRxJava() ( 
var downloadImageCount - 0 
Observable.just ("http://192.168.3.13:8080/") 
//Observable.just("http://10.0.2.2:8080/") 
-flatMap { url -> 
/L LAUDE FRA PTIR EORR i6 
val paths = arrayOf( 


) 


"1.png", "2.png", "3.png", 
"4.png", "5.png", "6.png", 
"7.png", "8.png", "9.png" 


// 8l& — TRÄ] Observable ŽE 
Observable.fromArray(*paths).map ( path -> 


) 
) 


//8lt Retrofit HR, ARZ MEIHA 

val retrofit = Retrofit.Builder().baseUrl(url).build() 
//Retrofit EE TS WAS JEOJRESEBI, BEA TIENER 

val service = retrofit.create(ChatService::class.java) 
val call = service.getHeadImage (path) 

val response - call.execute() 


//response. body () X&//lfff ResponseBody HR, M E EFIE — fS 1148 A H 
/LHBCINSOIWÉR A ERE HTTP body MAR, BEBE RRE 


BitmapFactory.decodeStream(response.body()!!.byteStream()) 


-subscribeOn (Schedulers.computation()) 
-observeOn (AndroidSchedulers.mainThread()) 
.subscribe ( bmp -> 

/LEBUBIETARTETEE 


imageViews [downloadImageCount-4-*]?.setlImageBitmap (bmp) 


} 


Observable 的 输入 数据 只 有 一 个 网 站 地 址 ， 而 我 们 要 以 这 个 地 址 为 基础 下 载 9 张 图 片 ， 如 
果 使 用 map 来 处 理 ， 只 能 一 对 一 ， 也 就 是 输入 一 条 数据 ， 处 理 后 输出 一 条 数据 。 这 肯定 不 能 
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满足 我 们 的 需求 ， 那 怎么 办 呢 ? 我 们 可 以 选择 一 个 更 神奇 的 方法 fatMap0， 不 必 太 深究 名 字 
的 意思 ， 那 是 浪费 精力 ， 理 解 它 的 功能 最 重要 。 与 mapO 不 同 的 是 设置 给 它 的 回调 方法 ， 处 理 
完 数据 后 ， 要 构建 一 个 新 的 Observable 对 象 并 返回 之 。 如 果 我 们 在 构造 这 个 新 的 Observable 
时 ， 给 它 传 入 多 项 数据 ， 再 为 这 个 新 的 Observable 设置 map， 在 map 的 回调 方法 中 处 理 各 项 
数据 ， 这 样 依然 可 以 在 Observer 中 收 到 每 项 转换 后 的 数据 ， 而 且 Observer 只 订阅 了 外 层 的 
Observable， 没 有 订阅 内 部 的 Observable， 是 不 是 很 神奇 啊 ? 原理 就 不 用 管 了 ， 反 正 这 样 是 能 
做 到 的 。 

注意 加 粗 的 语句 ， 调 用 了 ChatService 的 新 方法 getHeadImage0， 所 以 要 为 ChatService 接 
口 添 加 这 个 方法 : 

GGET ("/image/head/(file name)") 

fun getHeadImage(8Path("file name") fileName:String): Call«ResponseBody» 


19,5 并 行 map 


在 前 面 的 代码 中 ， 我 们 指定 “订阅 ”动作 发 生 在 computation 线程 中 ， 又 指定 了 “观察 ” 
动作 发 生 在 主线 程 中 , 那么 这 几 个 图 像 是 并 行 下 载 还 是 串 行 下 载 的 呢 ? 其 实 是 串 行 下 载 , 也 就 
是 一 个 下 载 完了 才 下 载 下 一 个 。 

外 部 Observable 虽然 指定 了 订阅 发 生 在 计算 线程 中 ， 但 是 内 部 Observable (flatMap 中 创 
建 的 Observable) 只 有 一 个 实例 ， 内 部 Observable 要 处 理 数 组 的 每 个 元 素 ， 只 能 一 个 接 一 个 同 
步 进行 ， 当 然 的 确 是 在 计算 线程 中 处 理 ， 但 对 这 些 数据 来 讲 都 是 在 同一 个 线程 中 被 处 理 的 。 

如 果 改 成 并 行 下 载 ， 应 该 可 以 提高 下 载 速度 ， 那 么 如 何 改 成 并 行 下 载 呢 ? 设置 内 部 
Observable 的 订阅 线程 ， 它 对 数组 中 各 元 素 的 处 理 就 可 以 并 行 了 。 这 太 简 单 了 ， 代 码 改 动 如 下 

(注意 最 后 加 粗 的 一 句 〉: 

// 8l& — f 3f HU Observable ŽP 

Observable.fromArray(*paths).map ( path -> 
// lf Retrofit HR, ARZ MEIHA 
val retrofit = Retrofit.Builder().baseUrl(url).build() 
//Retrofit REROKRKH EELO, BA T SEASTUBHER, 
val service = retrofit.create(ChatService::class.java) 
val call = service.getHeadImage (path) 
val response = call.execute() 
//response. body () I&K[Hfff/ ResponseBody HR, ME EEEXEIC—M fI TA VR, 
V/Z NEBA WERHEZ HTTP body MAR, RERBA, HERIR 
BitmapFactory.decodeStream(response.body()!!.byteStream()) 

).subscribeOn (Schedulers.computation()) 


增加 这 一 句 之 后 ， 就 会 发 现 图 像 下 载 速度 大 幅 提 高 。 
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再 稍微 介绍 一 下 computation 线程 。 准 确 地 说 ， 它 其 实 是 一 个 线程 池 ， 里 面 的 线程 数量 是 
有 上 限 的 ， 但 是 肯定 多 于 9 个 ， 所 以 当 我 们 利用 它 来 下 载 图 像 时 ， 这 9 幅 图 像 可 以 同时 下 载 。 


这 段 代码 也 可 以 这 样 写 ， 效 果 完 全 相同 : 
private fun getImagesRxJava2() ( 
var downloadImageCount - 0 
Observable.just( 
"l.png", "2.png", 
"4.png", "5.png", 
"7.png", "8.png", 


).flatMap ( path -> 
LAUFE FERB PIRHI EE 


// 创 建 一 个 新 所 Observable JÉAR[H] 
Observable.just (path) .map { fileName -> 
//ül& Retrofit HR, HARE MEIHA 
val retrofit Retrofit.Builder() 
-baseUrl("http://192.168.3.13:8080/") 


//-baseUrl("http://10.0.2.2:8080/") 
-build() 
//Retrofit EE LTSE HAS JEOJEE SEDI, BEA T Ed f UHBUR 


retrofit.create (ChatService::class.java) 


service.getHeadImage (fileName) 


"3.png", 
"6.png", 
"9.png" 


val service 


val call - 
= call.execute() 


val response - 
//response. body () X&[IIffj& ResponseBody HR, ME EEEXC— S37 1 BÍ A H 
/FCISSCWÉRA QEEEINÉ HTTP body HAR, HERRA, HERRIE 


BitmapFactory.decodeStream(response.body()!!.byteStream()) 


) 
) 


-subscribeOn (Schedulers.computation()) 
-observeOn (AndroidSchedulers.mainThread()) 
.subscribe ( bmp -> 


LEBER TEE 


imageViews [downloadImageCount-*]?.setlImageBitmap (bmp) 


} 
与 前 面 不 同 的 是 此 段 代码 中 外 层 Observable 已 经 包含 了 多 项 数据 (图 像 路 径 ) ， 内 部 


Observable 一 次 只 处 理 一 项 数据 (图像 路 径 ) ， 因 而 内 部 Observable 不 需 再 指定 线程 池 ， 使 用 
外 部 Observable 指定 的 线程 池 已 足够 ， 于 是 每 项 数据 的 处 理 都 会 在 不 同 的 线程 中 执行 。 


1 9. 6 RxJava 5 Retrofit 合体 


在 前 面 的 例子 中 ， 同 时 使 用 了 RxJava 和 Retrofit， 感 觉 还 不 错 ， 没 有 什么 不 和 谐 。 所 谓 它 
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们 的 合体 ， 就 是 让 Retrofit 自觉 利用 RxJava 实现 异步 调用 。 我们 已 知 Retrofit 会 为 我 们 创建 的 
接口 自动 产生 代理 对 象 ， 这 个 对 象 是 一 个 Call 类 型 。 合 体 后 ， 将 RxJava 结合 了 进来 ， 这 个 代 
理 对 象 变 成 了 Observable 类 型 ， 我 们 依然 可 以 对 这 个 Observable 进行 订阅 ， 设 置 它 的 线程 ， 
设置 map 或 flatMap 等 。 下 面 我 们 就 用 合体 的 方式 改写 一 下 前 面 获取 一 幅 图 像 的 代码 。 

首先 改写 一 下 被 Retrofit 反射 的 Service 接口 ChatService， 其 中 获取 一 幅 图 像 的 方法 改 为 
下 面 这 样 : 

GGET ("/image/(file name}") 

fun getImage (@Path ("file name") fileName:String): Observable«ResponseBody» 

只 有 返回 值 类 型 变 了 ， 原 先是 Call<>， 现 在 是 Observable<>， 也 就 是 说 通过 Retrofit 直接 
创建 RxJava 的 Observable. 注意 , 这 里 的 改动 会 引起 之 前 代码 出 现 编译 错误 , 因为 不 再 适用 ， 
把 它们 改 为 注释 即 可 。 

要 让 Retrofit 把 Observable 创建 出 来 ， 还 需要 依赖 一 个 库 : 


implementation 'com.squareup.retrofit2:adapter-rxjava2:2.5.0' 


这 个 库 能 让 RxJava 与 Retrofit 合体 ， 所 以 下 载 单个 图 像 的 代码 变 成 这 样 : 


private fun getOneImageRxJava() ( 


var downloadImageCount - 0 

//ül&& Retrofit HR, HARE MEIHA 

val retrofit = Retrofit.Builder() 
-baseUrl("http://192.168.3.13:8080/") 
//.baseUrl("http://10.0.2.2:8080/") 
ILKBEEUERIRIBIE Call, HITJREEEIRIISAEHE T Observable, 
IL BEDULATEBE Call ARH Observable 5 Call HARK 
.addCallAdapterFactory (RxJava2CallAdapterFactory.create ()) 
-build() 

//Retrofit KE LS WAS JEOIRE SEP, BA T REASTUBHUR 

val service = retrofit.create(ChatService::class.java) 

val observable = service.getHeadImage ("1.png") 

observable.map ( responseBody -» BitmapFactory.decodeStream 

(responseBody.byteStream()) ) 
-subscribeOn (Schedulers.computation()) 
.ObserveOn(AndroidSchedulers.mainThread()) 
.subscribe ( bmp -> 
/LREBUIETRTETERR 


imageViews [downloadImageCount-4-*]?.setlImageBitmap (bmp) 


) 


解释 一 下 : 先 创建 Retrofit ( 别 忘 了 设置 CallAdapter) ， 反 射出 ChatService 对 象 ， 调 用 业 
务 方法 gettmageO0， 得 到 一 个 Observable 对 象 ， 这 个 对 象 中 就 包含 了 通过 HTTP 获取 图 像 的 代 
人 码 。 然 后 为 Observable 设置 map 并 订阅 它 。 
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在 此 方式 下 调用 gettmageO 时 并 没有 发 生 网 络 访问 ， 而 是 在 subscribe() 方 法 被 调用 时 才 触 
发 网 络 访问 。 当 网 络 请 求 完成 ， 得 到 responseBody 对 象 ， 在 map 中 把 转 成 了 Bitmap 的 对 象 又 
扔 给 了 subscribe0 的 回调 函数 。 

我 们 能 不 能 让 它们 合体 完成 多 个 图 像 的 并 行 下 载 呢 ? 下 节 分 解 。 


1 9. 7 RxJava Retrofit 合体 并 行 执行 


其 实 这 个 也 很 简单 , 我 们 可 以 创建 外 层 和 内 层 的 Observable。 外 层 Observable 处 理 多 项 数 
据 ， 内 层 Observable 只 处 理 一 项 ， 所 以 可 以 使 用 ChatService 的 getImage0 创 建 的 Observable 
作为 内 部 的 Observable， 再 设置 外 层 Observable 在 计算 线程 里 执行 即 可 。 

因为 在 我 们 的 Web 服务 程序 中 “image/head/” 路 径 下 有 多 个 图 像 , 所 以 要 先 改 一 下 这 个 路 径 
对 应 的 ChatService 方法 getHeadImage0， 将 其 返回 值 类 型 改 成 Observable<ResponseBody>。 代 码 
如 下 : 


GGET ("/image/(file name)") 
fun getlImage(8Path("file name") fileName:String): Observable«ResponseBody» 


最 终 代 码 为 : 


private fun getlImagesRxJava2() ( 

// Jf Retrofit HR, PARZ MEIHA 

val retrofit = Retrofit.Builder() 
-baseUrl("http://192.168.3.13:8080/") // AE EPIBI HJE 
//.baseUrl("http://0.0.2.2:8080/") / / WA WII EDAH 
.addCallAdapterFactory (RxJava2CallAdapterFactory.create()) 
-build() 

val service = retrofit.create(ChatService::class.java) 


var downloadImageCount - 0 
Observable.just( 
"l.png", "2.png", "3.png", 
"A.png", "5.png", "6.png", 
"7.png", "8.png", "9.png" 
).flatMap ( path -» 
// EBER HIETE 
// 访 向 网 禾 ,， EEIMÆ Observable 
service.getHeadImage (path) .map { responseBody -> 
//MresponseBody X/ $t EEEXEIC— 3-13 f A i, 
/LHCINSE TRA CREE HTTP body MAZ, BEEISTIÉO HERIR 
BitmapFactory.decodeStream(responseBody.byteStream()) 
) 
)-subscribeOn(Schedulers.computation()) 


-observeOn (AndroidSchedulers.mainThread()) 
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.subscribe ( bmp -> 
/LEBESIBTITE TE 


imageViews [downloadImageCount--*]?.setImageBitmap (bmp) 


} 


关键 点 还 是 flatMap0 的 使 用 .在 创建 了 内 部 Observable 后 , 它 将 路 径 转 换 成 Bitmap 对 象 ， 
最 终 扔 给 了 Observer。 


1 Q, 8 RxJava 5 Activity 的 配合 


RxJava 5j Activity 的 配合 主要 是 考虑 在 Activity 销毁 过 程 中 如 何 及 时 停止 订阅 , 以 防止 对 
已 销毁 的 UI 操作 引起 骨 溃 的 问题 。 

做 法 很 简单 ， 使 用 一 个 专门 用 于 取消 订阅 的 对 象 ,在 Activity 的 某 个 生命 周期 方法 中 将 订 
阅 取 消 即 可 。 

首先 是 如 何 获得 这 个 用 于 取消 订阅 的 对 象 。 这 个 对 象 是 一 个 Disposable 实例 , 得 到 它 的 方 
式 其 实 很 简单 ， 只 需 保存 RxJava 整个 调用 链 的 最 终 返 回 值 : 


this.disposable = Observable.just( 


我 们 知道 一 个 调用 链 的 返回 值 是 最 后 一 个 方法 的 返回 值 ， 所 以 这 个 对 象 其 实 是 subscribe) 
返回 的 ， 很 显然 disposable 是 Activity 的 一 个 属性 ， 这 样 在 Activity 的 任何 方法 中 都 可 以 使 用 
它 。 最 好 在 哪个 方法 中 使 用 呢 ? 应 该 是 onStop0， 因 为 这 个 方法 是 在 UI 还 没有 被 销毁 之 前 调 
HH]. FÆ, Activity 的 onStop0 出 现 如 下 代码 : 

override fun onstop() { 

this.disposable?.let ( 
if ('it.isDisposed)( 
it.dispose() //R TÄ] 
} 
} 
super.onStop() 
} 


XT RxJava 的 内 容 ， 还 有 很 多 细节 ， 我 们 不 可 能 讲 得 面面俱到 ， 还 需 自行 探索 、 领 情 。 
下 一 章 我 们 将 回 到 要 完成 的 App 上 ， 为 它 增 加 一 个 主要 的 功能 : 多 人 聊天 。 
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前 面 已 经 实现 了 聊天 界面 ， 但 还 没有 实现 网 络 通信 ， 现 在 我 们 将 实现 真正 的 聊天 功能 了 。 
由 于 要 支持 多 人 聊天 ,必须 能 区 分 各 聊天 者 ， 因 此 每 个 人 都 要 有 唯一 标志 , 一 般 都 是 在 后 台 服 
务 器 中 用 数据 库存 储 聊天 者 的 信息 、 以 数据 表 中 的 ID 列 来 存储 唯一 标志 。 我 们 的 后 台 Web 
程序 已 经 准备 好 了 一 个 嵌入 式 数据 库 来 保存 用 户 信 息 。 应 该 先 实现 用 户 注册 功能 , 这 样 各 聊天 
者 才能 被 区 分 开 ， 之 后 再 实现 登录 和 聊天 功能 。 

当前 并 没有 注册 页 面 ，QQ 的 注册 实现 挺 复 杂 ， 我 们 主要 关注 的 是 聊天 功能 ， 所 以 就 不 完 
全 模仿 它 了 ， 来 一 个 简单 的 : 创建 一 个 注册 Activity， 在 其 中 实现 注册 功能 。 


20.1 添加 注册 功能 


20.1.1 创建 注册 Activity 


创建 Activity FILES EET. SET Basic 模板 创建 了 一 个 Activity， 名 为 
RegisterActivity， 注 意 其 语言 要 选 Kotlin， 如 图 20-1 所 示 。 完 成 后 ， 添 加 3 个 文件 : 
RegisterActivity.kt、 layout/activity register.xml 和 layout/content register.xml. 

在 实现 注册 业务 之 前 ， 我 们 先 把 注册 页 面 显示 出 来 ， 如 图 20-2 所 示 。 我 们 需 响 应 箭头 所 
指控 件 ， 进 入 注册 页 面 ， 此 控件 的 id 为 textViewRegister， 响 应 代码 如 下 (在 LoginFragment 
的 onViewCreated()'P) : 

/ LEA EMRET 


textViewRegister.setOnClickListener ( 
// BREM Activity 
val intent = Intent (context, RegisterActivity::class.java) 
startActivity (intent) 

) 


下 一 步 设 计 注 册页 面 的 Layout. 
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Creates a new basic activity with an app bar. 
Activity Name: 
Layout Name: activity_register 
Title: RegisterActivity a T V. 8 A 
QS /SHUE T ae Dy. 
[7] Launcher Activity nc ATA 3 re ^ 
[O Use a Fragment aH py 
T» M 
Hierarchical Parent: -|f Pw ze m A P 
Package name: com.cxample.niu.qqapp. ~ 4 
Source Language: Kotlin ~ 
E 
Target Source Set: main ~ 忘记 密码 ? 新 用 户 注 册 
20-1 图 20-2 


20.1.2 ”设计 注册 页 面 


注册 页 面 主要 是 为 了 展示 如 何 实 现 业 务 逻 辑 ， 所 以 界 
面 也 不 用 太 复杂 ， 如 图 20-3 所 示 。 

注意 ， 页 面 中 有 图 像 控件 ， 我 们 要 用 它 来 上 传 头像 。 

设计 这 个 页 面 时 , 只 需 编辑 代表 内 容 区 的 Layout 文件 
content_register.xml， 源 码 如 下 : 


<?xml version="1.0" encoding="utf-8"?> ez 


<androidx.constraintlayout.widget. 
ConstraintLayout 
xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:tools-"http://schemas.android.com/tools" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
android:layout width-"match parent" 
android:layout height-"match parent" 


20-3 


app:layout behavior="@s tring/ appbar scrolling view behavior" 
tools:showIn-"8layout/activity register" 
tools:context-".RegisterActivity"^ 


«androidx.cardview.widget.CardView 
android:id="@+id/cardView" 
android:layout width="140dp" 
android:layout height-"140dp" 
android:layout marginTop-"8dp" 
app:cardBackgroundColor-"8 android: color/| holo orange light" 
app:cardCornerRadius-"70dp" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toTopOf-"parent"^ 
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<ImageView 
android:id="@+id/imageViewAvatar" 
android:layout width: 
android:layout height-"match parent" 

"14dp" 

android:layout marginStart-"Odp" 


atch parent" 


android:layout margin- 


android:layout marginTop-"0dp" 

android:layout marginEnd-"0dp" 

app:layout constraintEnd toEndOf-"parent" 

app:layout constraintStart toStartOf-"parent" 

app:layout constraintTop toTopOf-"parent" 

app:srcCompat-"G8drawable/contacts normal" /> 
«/androidx.cardview.widget.CardView^ 


X«EditText 
android:id-"G(id/editTextName" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart: dp" 
android:layout marginTop-"8dp" 
android:layout marginEnd-"8dp" 
android:ems-"10" 
android:hint=" 输 入 名 字 " 
android:inputType-"textPersonName" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf-"Q*id/cardView" /> 


«EditText 
android:id-"Q(id/editTextPassword" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:layout marginEnd-"8dp" 
android:ems-"10" 
android:hint=" 输 入 密码 " 
android:inputType-"textPassword" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomOf="@+id/editTextName" /> 


«EditText 
android:id-"G(*id/editTextPassword2" 
android:layout width="0dp" 
android:layout height-"wrap content" 
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android:layout marginStart-"8dp" 

android:layout marginTop-"8dp" 

android:layout marginEnd-"8dp" 

android:ems-"10" 

android:hint=" 再 次 输入 密码 " 

android:inputType-"textPassword" 

app:layout constraintEnd toEndOf-"parent" 

app:layout constraintStart toStartOf-"parent" 

app:layout constraintTop toBottomOf-"G-id/editTextPassword" /> 


«Button 
android:id-"Q*id/buttonCommit" 
android:layout width-"0dp" 
android:layout height-"wrap content" 
android:layout marginStart-"8dp" 
android:layout marginTop-"8dp" 
android:layout marginEnd-"8dp" 
android: text=" H32" 
app:layout constraintEnd toEndOf-"parent" 
app:layout constraintStart toStartOf-"parent" 
app:layout constraintTop toBottomof-" G*id/editTextPassword2" /> 


«/androidx.constraintlayout.widget.ConstraintLayout^ 


注册 的 主要 业务 逻辑 是 上 传 用 户 名 、 密 码 和 头像 (如 
果 有 的 话 ) ,然后 获取 服务 端 返回 的 数据 并 判断 是 否 成 功 。 
如 果 成 功 ， 就 返回 登录 页 面 ， 如 果 不 成 功 ， 就 重 试 。 

要 上 传 头像 ， 必 须 先 获取 图 像 。 我 们 可 以 学 习 一 下 QQ 
App 中 的 做 法 ， 效 果 如 图 20-4 所 示 。 

在 页 面 的 底部 有 一 个 菜单 (Bottom Sheet) ， 用 户 可 以 
选择 其 中 某 项 。 要 显示 它 , 需要 使 用 BottomSheetDialog 类 。 
下 面 我 们 就 把 它 设计 出 来 。 

20.1.3 显示 Bottom Sheet 


图 20-4 


先 要 为 BottomSheetDialog 设计 出 界面 。 看 起 来 使 用 一 个 纵向 的 LinearLayout 控件 做 容器 
最 合适 ， 为 它 创建 一 个 Layout 文件 ， 并 命名 为 image pick sheet menu.xml， 源 码 如 下 : 


<?xml version-"1.0" encoding-"utf-8"?» 

«LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
xmlns:app-"http://schemas.android.com/apk/res-auto" 
xmlns:tools-"http://schemas.android.com/tools" 
android:layout width-"match parent" 
android:layout height-"wrap content" 
android:background-"8color/colorPrimaryDark" 
android:gravity-"center" 
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android:orientation-"vertical"^ 
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«TextView 
android:id-"8id/sheetItemTakePhoto" 
android:layout width-"match parent" 
android:layout height-"match parent" 
android:layout marginBottom-"1dp" 
android:background-"8android:color/ background light" 
android:gravity-"center" 
android:padding-"A4dp" 
android:text=" 拍 照 " 
android:textSize-"24sp" /> 

<TextView 
android:id="@+id/sheetItemSelectPicture" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:layout_marginBottom="1dp" 
android:background="@android:color/ background light" 
android:gravity="center" 
android:padding="4dp" 
android:text=" 从 相册 选择 " 
android:textSize-"24sp" /> 

<TextView 
android:id="@+id/sheetItemCancel" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:background="@android:color/ background light" 
android:gravity="center" 
android:padding="4dp" 
android:text=" 取 消 " ul 
android:textSize-"24sp" /> 从 相册 选择 

取消 
</LinearLayout> 
览 效果 如 图 20-5 所 示 。 maos 


再 为 RegisterActivity 类 添加 一 个 属性 ， 保 存 SheetDialog 的 实例 : 


class RegisterActivity : AppCompatActivity() { 


// IH Tim Bottom Sheet 
private var sheetDialog: BottomSheetDialog? - null 


然后 在 onCreate0 中 创建 BottomSheetDialog 的 实例 : 


this.sheetDialog = BottomSheetDialog(this) 
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在 单 击 头像 控件 时 显示 出 Sheet。 响 应 单 击 事件 的 代码 如 下 : 


imageViewAvatar.setOnClickListener( 
val view = layoutInflater.inflate(R.layout.image pick sheet menu, null) 


sheetDialog!!.setContentView (view) 
sheetDialog!!.show() 
} 


运行 App， 在 注册 页 面 单 击 头像 时 ， 是 不 是 显示 出 了 底部 的 Sheet ( 见 图 20-6) ? 

Sheet 显示 出 来 了 ， 如 何 响应 项 的 选择 呢 ? 它 
的 每 一 项 是 LinearLayout 中 的 一 个 TextView, 我 们 
只 需 响 应 TextView 的 单 击 事件 即 可 ， 当 然 要 先 确 
定 它们 的 id LRI 20-7) 。 


Component Tree 


LinearLayout|vertica 

Ab sheetltemTakePhoto 
Ab sheetltemSelectPicture 
Ab sheetltemCancel 


拍照 
从 相册 选择 
取消 


图 20-6 图 20-7 

我 们 先 编写 好 响应 单 击 事件 的 代码 框架 : 
imageViewAvatar.setOnClickListener( 

val view - layoutInflater.inflate(R.layout.image pick sheet menu, null) 

// Bt Sheet "PIG, HE EIU EE NAE 

view.findViewByIdXTextView» (R.id.sheetItemTakePhoto). 

setOnClickListener( 
16 


) 
view.findViewByIdXTextView»? (R.id.sheetItemSelectPicture). 


setOnClickListener ( 


/ LM EE 

} 

view.findViewById<TextView>(R.id.sheetItemCancel) .setOnClickListener { 
// Bit Sheet 
sheetDialog?.dismiss() 

$ 


sheetDialog!!.setContentView (view) 


sheetDialog!!.show() 
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在 单 击 取消 时 我 们 隐藏 了 Sheet， 调 用 方法 dismissO 即 可 。 
下 面 我 们 一 起 实现 拍照 功能 。 至 于 如 何 从 相册 中 选择 ， 做 法 与 拍照 很 相似 ， 可 自行 完成 。 


20.1.4 拍照 


拍照 功能 可 以 完全 由 我 们 自己 实现 ， 主 要 是 利用 操作 摄像 头 的 API 实现 图 像 预览 、 图 像 
保存 等 工作 。 一 般 大 家 不 干 这 种 事 ， 因 为 很 麻烦 ， 并 且 Android 系统 中 有 现成 的 拍照 组 件 ， 以 
Activity 的 形式 存在 ， 我 们 可 以 直接 拿 来 用 ! 下 面 要 实现 的 拍照 功能 也 是 利用 系统 中 所 带 的 拍 
照 Activity (不 用 担心 不 存在 ， 它 是 标准 组 件 ， 必 然 存 在 )。 

拍照 的 过 程 很 简单 :启动 拍照 Activity， 在 拍照 Activity 中 操作 摄像 头 ， 获 取 图 像 。 这 个 
图 像 在 拍照 Activity 返回 后 我 们 怎么 获得 呢 ? 我 们 可 以 在 启动 拍照 Activity 时 向 它 传递 参数 ， 
其 中 有 一 个 参数 用 来 告诉 它 我 们 希望 将 图 像 保存 在 哪个 文件 中 。 这 些 参数 的 名 字 都 是 字符 串 ， 
当然 不 能 随便 写 ， 需 要 使 用 能 被 Activity 接收 的 参数 名 ， 这 些 参数 名 可 能 是 拍照 Activity 规定 
的 ， 也 可 能 是 SDK 中 的 一 些 标准 参数 名 。 

我 们 把 拍照 功能 封装 到 一 个 方法 中 ， 代 码 如 下 : 


private fun showTackPhotoView() { 


) 


// BRER ERF FIRIR HI RR 
val imageOutputFile = generateOutPutFile (Environment.DIRECTORY DCIM) 
LL BDCIERUR XUI Uri HR, CHAFEE 
this.imageUri - FileProvider.getUriForFile( 

this, 

"niuedu.com.qqapp.fileprovider", 

imageOutputFile!! 
) 
//Él& Intent, AZ Activity 
val intent = Intent(MediaStore.ACTION IMAGE CAPTURE) ///ffH 
intent.putExtra(MediaStore.EXTRA OUTPUT, this.imageUri) //1É4E/E/i ff HM AL 
startActivityForResult(intent, TAKE PHOTO) ///E2///f/f 


最 后 一 句 中 的 TAKE PHOTO 是 请 求 码 , 是 RegisterActivity 的 一 个 静态 属性 , 定义 如 下 : 


class RegisterActivity : AppCompatActivity() { 


/LAEXTEBEXIR, HF Java Él static 
companion object ( 

//B3 Activity HRR 

val TAKE PHOTO: Int = 1111 
} 


第 一 句 获取 一 个 File 对 象 ， 这 个 File 就 是 图 像 要 保存 到 的 文件 ， 当 然 不 是 直接 保存 到 这 
个 File 中 ， 而 是 为 了 得 到 它 的 路 径 。 第 二 句 由 File 对 象 获取 了 一 个 Uri， 相 当 于 File 的 路 径 ， 
但 它 是 一 个 ContentProvider 形式 的 路 径 ， 因 为 拍照 Activity 只 接受 Uri 作为 文件 路 径 ， 而 且 新 
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的 Android 系统 已 经 不 允许 直接 通过 普通 的 文件 路 径 访问 文件 了 。 会 暴露 数据 的 存放 形式 , 存 
在 安全 风险 ， 所 以 只 能 以 ContentProvider 的 形式 访问 。 
generateOutPutFile0 方 法 是 我 们 自 定义 的 一 个 方法 ， 在 设备 的 外 部 存储 的 公共 目录 下 的 子 
目录 “dcim” 中 创建 了 一 个 File 对 象 。dcim 是 标准 的 相册 目录 , 放 在 其 中 的 图 像 文件 能 在 “ 相 
册 ( 也 可 能 叫 图 库 ) ”中 看 到 。 文 件 之 所 以 能 创建 于 deim 目录 中 ， 是 由 generateOutPutFile() 
的 参数 Environment.DIRECTORY DCM 决定 的 ， 它 的 值 就 是 字符 串 “dcim”。 下 面 是 方法 
generateOutPutFile0 的 代码 : 
private fun generateOutPutFile(pathInExternalStorage: String): File? { 
//LBUTHESRR IHRE 
val format - SimpleDateFormat ("yyyyMMddHHmms s" ) 
val date = Date(System.currentTimeMillis()) 


val photoFileName = format.format(date) + ".png" 
// 8g File (SUB FFEA, APÁECE AREE AUTHOR 
val path - Environment.getExternalStoragePublicDirectory 
(pathInExternalStorage) 
val outputFile = File(path, photoFileName) 
try { 
if (outputFile.exists()) ( 
outputFile.delete() 
) 
outputFile.createNewFile() 
) catch (e: IOException) ( 
e.printStackTrace() 
return null 
) 
return outputFile 
} 
FileProvider.getUriForFile() kt Uri 是 怎么 实现 的 呢 ? Uri 有 什么 意义 ? 还 有 ContentProvider 
到 底 是 怎样 的 工作 原理 ? 下 面 来 详细 了 解 一 下 Contentprovider， 同 时 把 相关 的 问题 解释 清楚 。 


1. ContentProvider 介绍 


ContentProvider 〈 内 容 提供 者 ) 是 Android 四 大 组 件 之 一 ， 为 存储 和 获取 数据 提供 形式 统 
一 的 逻辑 接口 。 利 用 它 可 以 在 不 同 的 应 用 程序 之 间 共 享 数据 。 它 对 数据 的 组 织 是 逻辑 上 的 ,其 
形式 很 像 关系 型 数据 库 ， 有 类 似 库 、 表 、 行 、 列 四 层 概念 ， 不 论 哪 个 概念 层 的 数据 ， 都 可 以 以 
Uri 形式 的 路 径直 接 访问 它 。 
Android 已 经 为 常见 的 一 些 数据 提供 了 默认 的 ContentProvider， 这 里 用 到 的 FileProvider 
就 是 其 中 之 一 。 
Uri 是 什么 ? 在 上 面 的 代码 中 ，FileProvider.getUriForFile0 返 回 的 Uri 是 “content://niuedu 
.com.qqapp.fileprovider/img/20190523212510.png”， 像 极 了 URL ， 内 容 可 分 成 好 几 部 分 : 
“content” 代 表 协 议 ，“niuedu.com.qqapp.fileprovider” 对 应 URL 中 的 主机 地 址 部 分 ; 
“img/20190523212510.png” 是 数据 存放 的 路 径 。 然 而 ， 对 ContentProvider 的 访问 是 在 本 机 发 
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生 的 , 所 以 “niuedu.com.qqapp.fileprovider” 不 可 能 是 主机 地 址 , 那 它 是 什么 呢 ? Android 把 它 
叫 作 “authority (授权) ”， 但 实际 上 跟 权 限 也 没 多 大 关系 ， 主 要 就 是 用 于 区 分 不 同 的 内 容 ， 
防止 与 别人 的 内 容 访 问 路 径 产 生 冲 突 ， 所 以 要 求 这 部 分 是 唯一 的 。 而 且 这 部 分 是 
ContentProvider 的 创建 者 自己 定 的 ， 隐 藏 了 数据 真实 的 存储 路 径 ， 于 是 起 到 了 部 分 数据 安全 的 
效果 。 

依然 拿 上 面 的 Uri 来 说 ， 首 先 FileProvider 代表 了 一 个 数据 库 ， 存 放 文件 夹 和 文件 ， 其 中 
的 文件 夹 对 应 一 张 表 、 文 件 对 应 一 条 记录 。 文件 有 很 多 参数 ， 其 中 一 个 参数 就 对 应 一 列 ， 当 然 
ContentProvider 的 实现 者 不 一 定 把 数据 访问 细 化 到 这 种 程度 , 但 是 对 它 的 数据 组 织 形式 可 以 按 
这 种 方式 去 理解 。 安 全 性 是 ContentProvider 的 一 个 重要 目标 ， 因 为 每 个 层 的 数据 都 可 以 通过 
产生 一 个 Uri 直接 访问 ， 所 以 可 以 为 每 个 Uri 赋予 不 同 的 读 写 权 限 ， 精 细 地 控制 数据 的 访问 权 
限 ， 这 是 灵活 地 保证 数据 安全 的 关键 。 

要 从 内 容 提供 者 获取 数据 ， 需 要 使 用 ContentResolver (内 容 解 决 器 ) ， 它 提供 了 一 些 类 似 
数据 库 的 增 、 删 、 改 、 查 方法 。 

在 上 面 的 代码 中 ， 我 们 其 实 是 内 容 提 供 者 ， 拍 照 Activity 才 是 内 容 访问 者 ， 它 要 访问 的 是 
我 们 指定 的 一 个 文件 ， 我 们 把 文件 的 Uri 传 给 它 ， 它 就 会 在 合适 的 时 间 通 过 ContentResolver 
访问 这 个 文件 。 

现在 再 来 看 调用 FileProvider 的 方法 getUriForFile() 的 语句 ,应 该 能 看 明白 了 。 它 有 三 个 参 
数 , 第 一 个 不 必 说 了 , 第 二 个 是 “authority”, 第 三 个 是 File 对 象 , 从 它 的 路 径 计 算出 了 Urio 
路 径 部 分 的 “img” 和 “20190523212510.png” 是 怎么 产生 的 呢 ? 20190523212510.png 是 在 
generateOutPutFile0 中 产生 的 ， 文 件 名 是 当前 的 日 期 时 间 ， 但 它 所 在 的 文件 夹 怎 么 变 成 img 了 
We? 我 们 可 是 在 dcim 下 建 的 这 个 文件 啊 ! 很 简单 ， 对 文件 夹 的 名 字 做 了 映射 ! 这 进一步 隐藏 
了 存储 细节 ， 增 强 了 安全 性 。 这 是 怎么 实现 的 呢 ? 请 看 下 面 的 内 容 。 


2. 利用 FileProvider 提供 内 容 


我 们 不 需要 自己 创建 ContentProvider 类 ， 因 为 可 以 利用 现成 的 FileProvider。 主 要 利用 这 
个 类 将 文件 抽象 成 ContentProvider 中 的 数据 ， 这 样 拍照 Activity 才能 通过 ContentResolver 使 


用 它 。 

内 容 提 供 者 作为 四 大 组 件 之 一 ， 要 通过 它 提供 内 容 ， 就 必须 在 Manifest 文件 中 定义 ， 代 
人 码 如 下 : 

<provider 


android:name-"androidx.core.content.FileProvider" 
android:authorities-"niuedu.com.qqapp.fileprovider" 
android:exported-" false" 
android:grantUriPermissions-"true"^ 
«meta-data 
android:name-"android.support.FILE PROVIDER PATHS" 
android:resource-"8xml/ provider paths" /» 
«/provider^ 


注意 ， 这 个 元 素 是 <application> 的 子 元 素 ， 也 就 是 与 <Activity> 是 同一 级 。 
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e android:name 属性 保存 ContentProvider 类 的 类 名 。 

e android:authorities 必须 与 传 给 getUriForFile0 的 第 二 个 参数 一 致 。 

e android:grantUriPermissions 指明 是 否 要 动态 获取 对 内 容 的 访问 权限 ， 后 面 会 介绍 动态 获取 
权限 的 概念 。 它 的 值 是 tue， 表 示 需 要 。 

* meta-data 中 指出 了 路 径 的 映射 关系 ， 当 然 不 是 直接 指出 的 ， 而 是 放 在 一 个 资源 文件 中 ， 其 
路 径 为 res/xml/provider paths.xml, res 下 一 般 没有 xml 文件 夹 ， 自 行 建立 即 可 。 


文件 provider paths.xml 的 内 容 如 下 : 


«?xml version="1.0" encoding="utf-8"?> 

<paths xmlns:android="http://schemas.android.com/apk/res/android"> 
«1--path Æ external-path HAMRE RÄIM, name JE BEBUATE E T, --> 
«1--BEE I content://. .PIEE T, BE Uri TPREEANBISEISEE ET. --> 
Xexternal-path name-"img" path-"DCIM"/-» 

«/paths» 


可 以 看 到 把 dcim 映射 成 了 img. 
3. 动态 申请 权限 


真正 拍照 之 前 ， 还 要 解决 一 个 问题 : 动态 申请 权限 。 在 早期 的 Android 开发 中 ， 想 使 用 什 
么 权限 ， 只 需 在 Manifest 文件 中 声明 一 下 即 可 ， 比 如 : 


<uses-permission android:name-"android.permission.INTERNET" /> 


对 网 络 访问 来 说 , 这 样 做 依然 可 以 工作 , 但 是 对 很 多 其 他 设备 的 使 用 , 仅仅 这 样 做 是 不 够 
的 ， 因 为 除了 加 入 这 样 的 声明 ,还 需要 在 运行 时 调用 某 些 方法 询问 用 户 是 否 允 许 使 用 , 这 就 是 
动态 申请 权限 。 这 样 做 的 主要 好 处 是 增加 了 系统 的 安全 性 ， 就 是 让 用 户 知 道 敏感 操作 , 但 是 大 
部 分 用 户 根本 不 知道 该 不 该 允许 ， 一 般 就 是 单 击 “是 ”“ 是 ”“ 是 ”。 

在 拍照 时 , 需要 访问 外 部 存储 和 相机 这 两 个 设备 , 所 以 需要 获取 权限 , 首先 还 是 在 Manifest 
文件 中 声明 权限 : 


<uses-permission android:name="android.permission.WRITE EXTERNAL STORAGE" /> 
<uses-permission android:name-"android.permission.CAMERA" /> 


然后 在 拍照 前 先 检查 是 否 具备 访问 相机 和 外 存 的 权限 , 如 果 没 有 , 就 需要 申请 成 功 后 再 拍 
代码 如 下 : 
// Kt Sheet PHH, RE ENMANE 


view.findViewById<TextView>(R.id.sheetItemTakePhoto) .setOnClickListener{ 


// füfit 
/LCBRBEBREEUHIEMRUR 


val permissionsList = ArrayList«String»() 
/LLBEEOR BÉ ETIBBL EUR 


if (ActivityCompat.checkSelfPermission( 


K 


this@RegisterActivity, 
Manifest.permission.CAMERA) !== PackageManager.PERMISSION GRANTED) ( 
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// Permission is not granted 
permissionsList.add(Manifest.permission. CAMERA) 
) 
/LLBEEGE BÉ I ERAI EUR 
if (ActivityCompat.checkSelfPermission(thisGRegisterActivity, 
Manifest.permission.WRITE EXTERNAL STORAGE) !== 
PackageManager.PERMISSION GRANTED) ( 
//Permission is not granted 
permissionsList.add(Manifest.permission.WRITE EXTERNAL STORAGE) 
} 


if (permissionsList.isEmpty()) { 
VITHPRRRT, HERTAKA 
showTackPhotoView () 
} else { 
/LTAEREIE PRR 
ActivityCompat.requestPermissions (this@RegisterActivity, 
//Hi List Æ Array 
Array(permissionsList.size) { i-> permissionsList[il]), 
ASK PERMISSIONS) 


) 


ActivityCompat.requestPermissions() 发 出 了 权限 请 求 ， 这 个 方法 可 以 一 次 请 求 多 个 权限 ， 
所 以 它 需 要 一 个 Array 包含 权限 。 它 的 第 3 个 参数 是 请 求 码 ， 其 作用 与 startActivityForResult() 


的 请 求 码 一 样 ， 定 义 如 下 : 


ILE X TEBERER, IST Java TÉ static 
companion object ( 


// BR Activity MRG 
val TAKE PHOTO: Int = 1111 
11 PRRI REG 


val ASK_PERMISSIONS: Int = 1112 
} 


当 调用 requestPermissions0 时 ， 会 出 现 如 图 20-8 
所 示 的 界面 。 只 有 选 了 人 允许 之 后 才能 拍照 ， 所 以 需要 | 
有 机 制 将 用 户 的 选择 通知 App RAAH? R | meer AH. SARME 
了 设置 侦 听 器 就 是 重 写 回 调 方法 ， 似 乎 也 没有 其 他 机 


允许 "QQApp 访问 存储 空间 吗 ? 


不 允许 后 不 再 询问 
制 了 。 这 里 重 写 Activity 的 onRequestPermissionsResult() 
方法 。 系 统 在 调用 这 个 方法 时 ， 通 过 传 入 参数 表明 了 不 允许 
用 户 申请 的 权限 哪个 被 允许 、 哪 个 被 拒绝 。 下 面 是 我 


们 的 实现 : 20-8 


override fun onRequestPermissionsResult (requestCode: Int, 
permissions: Array<String>, 


grantResults: IntArray) { 
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when (requestCode) { 
ASK PERMISSIONS -> { 
var i- 0 
for (i in 0 until permissions.size) ( 
if (grantResults[i] != PackageManager.PERMISSION GRANTED) { 
Toast.makeText ( 
this, 
"权限 申请 被 拒绝 ， 无 法 完成 照片 选择 。"， 
Toast.LENGTH SHORT 
).show() 
return 
} 
} 
// BERIT PR BILE EHI, A! 
showTackPhotoView () 
// Xfii Sheet 
SheetDialog?.dismiss() 
) 


else -> super.onRequestPermissionsResult (requestCode, permissions, 
grantResults) 
) 
} 


先 判断 参数 requestCode 的 值 是 不 是 我 们 的 请 求 码 CASK_PERMISSIONS) ， 如 果 是 ， 再 
判断 是 否 申请 成 功 。 所 有 权限 的 申请 结果 在 参数 permissions 中 ， 所 以 遍历 这 个 Array， 查 看 每 
一 项 是 不 是 PERMISSION GRANTED (赋予 权限 ) ， 如 果 有 一 项 没有 ， 则 拍照 不 能 进行 ， 怎 
么 办 ? 提示 一 下 用 户 。 

运行 App， 可 以 看 到 拍照 界面 吗 ? 不 行 ! 主要 原因 是 会 崩溃 ， 其 抛 出 的 异常 信息 为 “Uid 10202 
does not have permission to uri 0 @ content://niuedu.com.qqapp. fileprovider/img/20190525154630.png" . 
还 是 权限 的 问题 。“Uid 10202” 这 个 组 件 没有 权限 访问 指向 文件 的 Uri, 这 个 Uid 应 该 指 的 是 
拍照 Activity， 它 启动 后 要 访问 Uri， 但 是 没有 权限 ， 那 么 怎么 改正 这 个 问题 呢 ? 我 们 只 要 告 
诉 它 去 申请 权限 就 行 了 ， 可 以 通过 设置 启动 它 的 Intent 来 完成 〈 见 粗 体 语句 ) : 

private fun showTackPhotoView() ( 

LEE ERTE PIRK HI R 
val imageOutputFile = generateOutPutFile (Environment .DIRECTORY_DCIM) 
// BUCIERER ER Uri HR, CHAF AMEI E 
this.imageUri = FileProvider.getUriForFile( 

this, 

"niuedu.com.qqapp.fileprovider", 

imageOutputFile!! 
) 
//Él& Intent, EZITifff Activity 
val intent = Intent(MediaStore.ACTION IMAGE CAPTURE) // #4 
intent.putExtra (MediaStore.EXTRA OUTPUT, this.imageUri) //#5E BJA fé 
// EFI Activity, Si uri MUERUSEUE 
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intent.flags = Intent.FLAG GRANT WRITE URI PERMISSION or 
Intent.FLAG GRANT READ URI PERMISSION 
startActivityForResult(intent, TAKE PHOTO) ///2////f 
} 
“this.imageUri” 是 一 个 Uri 对 象 ， 是 RegisterActivity 的 一 个 属性 : 


41H EET RTE FIRIN] EEIE 


private var imageUri: Uri? = null 


Intent 的 构造 方法 参数 “MediaStore .ACTION IMAGE CAPTURE” 的 值 是 一 个 字符 串 ， 代 表 一 个 


Action, PP Activity 所 能 执行 的 动作 ， 每 个 Activity 的 创建 者 都 可 以 指定 它 能 执行 的 动作 ， 可 以 通 
过 在 Intent 中 设置 Action 来 找到 符合 的 Activity。 用 户 可 以 选择 其 中 一 个 执行 ， 如 果 只 找到 一 个 
Activity， 则 直接 启动 它 。 


运行 App， 可 以 看 到 拍照 界面 了 ， 但 是 还 没有 对 拍 下 的 照片 进行 处 理 。 


4. 处 理 拍 出 的 照片 
拍 完 照 后 一 般 都 需要 对 照片 修剪 。 与 拍照 一 样 ， 照 片 编 辑 界面 也 是 利用 别人 的 Activity， 
无 须 自己 实现 。 


要 处 理 照片 ， 需 要 先 取 得 拍 出 的 照片 。 我 们 启动 拍照 Activity 时 ， 调 用 了 方法 
startActivityForResult0， 所 以 可 以 重 写 父 类 的 方法 onActivityResult0， 响 应 其 返回 事件 ， 取 得 
照片 文件 。 这 很 容易 , 因为 这 个 文件 就 是 我 们 指定 的 , 把 这 个 文件 的 Uri 传 给 照片 编辑 Activity 
即 可 。 

先 上 代码 ， 再 解释 : 


override fun onActivityResult (requestCode: Int, resultCode: Int, data: Intent?) ( 
super.onActivityResult(requestCode, resultCode, data) 


when (requestCode) ( 
TAKE PHOTO -> { 
val intent = Intent ("com.android.camera.action.CROP") //J/Zf 
// FWD activity, Els uri MUERUSEUR 
1/1 BUSBIELETIOETIE E PIC HEP 
intent.addFlags(Intent.FLAG GRANT READ URI PERMISSION 
or Intent.FLAG GRANT WRITE URI PERMISSION) 
intent.setDataAndType(this.imageUri, "image/*") 
intent.putExtra("scale", true) 
intent.putExtra("crop", true) 
/LREBREBIEBI 
intent.putExtra("aspectX", 1) 
intent.putExtra ("aspectY", 1) 


// BENED ERE 
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intent.putExtra("outputX", 480) 
intent.putExtra("outputY", 480) 

// BERRAR, FRA XCTEIRIT IR 

intent.putExtra (MediaStore.EXTRA OUTPUT, this.imageUri) 
startActivityForResult (intent, CROP PHOTO) 


// Bit Sheet 


sheetDialog?.dismiss() 


) 


) 
} 


照片 编辑 Activity 的 Action 名 为 “com.android.camera.action.CROP”， 通 过 Intent 为 它 设 
置 了 很 多 参数 。 需 要 注意 的 是 , 我 们 把 编辑 后 的 图 像 依然 保存 到 拍照 所 指定 的 文件 中 ， 所 以 告 
诉 编辑 Activity 要 申请 对 Uri 的 读 和 写 权限 。 

启动 编辑 Activity 的 请 求 码 为 常量 “CROP PHOTO”， 定 义 方 式 与 “TAKE PHOTO” 一 样 : 


// LE XTEBEXIR, IST Java "FÉ static 


companion object ( 


) 


/  FISIÉI activity HARE 

val TAKE PHOTO: Int - 1111 

/ LBISIFUT AH Activity AREG 
val CROP PHOTO: Int - 1113 
/LLTBEEUREI IBOKIS 

val ASK PERMISSIONS: Int - 1112 


照片 编辑 时 的 效果 如 图 20-9 所 示 。 
5. 处 理 编辑 后 的 照片 


首先 要 取得 编辑 后 的 照片 ， 那 么 如 何 取得 呢 ? 通过 onActivityResult) ! 这 次 是 对 
"requestCode" SEF *CROP PHOTO” 的 情况 进行 处 理 。 访 问 文件 还 是 通过 属性 imageUri 完 
成 ， 代 码 如 下 : 


when (requestCode) { 


图 20-9 


TAKE PHOTO -> { 


CROP PHOTO -> try { 
/ / BAREH Bitmap Xf 
val bitmap - BitmapFactory.decodeStream( 
contentResolver.openInputStream(this.imageUri!!) 
) 
11 EBIT IRRA UR HUE 
this.imageViewAvatar .setImageBitmap (bitmap) 
// Bit Sheet 


sheetDialog?.dismiss() 
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} catch (e: FileNotFoundException) ( 
e.printStackTrace() 


“contentResolver” 是 Activity 的 一 个 属性 ， 获 取 与 当前 
Activity 相关 联 的 内 容 解 决 器 ， 然 后 通过 它 访问 
ContentProvider 提供 的 数据 ， 调 用 openInputStream() 方 法 将 k zi 
Uri 指向 的 数据 以 输入 流 的 形式 打开 ， 传 给 BitmapFactory 创 提交 


建 bitmap 对 象 ， 之 后 就 可 以 显示 它 了 ， 最 后 将 Bottom Sheet 
隐藏 。 图 20-10 是 拍照 完成 后 的 效果 。 图 20-10 


到 此 我 们 的 拍照 功能 就 算 完 成 了 ， 接 着 将 注册 信息 提交 到 Web 服务 器 。 
20.1.5 ”提交 注册 信息 
进行 网 络 通信 首先 要 在 manifest 文件 中 添加 互联 网 访问 权限 声明 : 


<uses-permission android:name="android.permission.INTERNET"/> 
1. 制定 统一 的 数据 返回 结构 


服务 端 在 响应 客户 端 请 求 时 ， 可 能 返回 各 种 数据 ， 比 如 登录 时 ， 若 成 功 则 会 返回 这 个 用 户 
的 信息 〈 失 败 时 不 返回 数据 ) ， 获 取 聊 天 消息 时 返回 消息 的 内 容 和 时 间 等 。 还 要 考虑 出 错 的 情 
Bb. FE Android 端 〈 客 户 端 ) 我 们 应 该 先 判断 是 否 出 错 ， 出 错时 要 提示 给 用 户 ， 没 有 出 错 的 话 
就 处 理 返回 的 数据 。 服 务 端 创建 了 一 个 类 , 用 于 包含 所 有 这 些 信 息 ， 使 客户 端 可 以 一 致 性 地 处 
理 每 种 返回 数据 。 这 个 类 取 名 为 ServerResult， 定 义 如 下 : 

A/** 

* retCode: T 0 MRTE iR, JURIERUR EMI, RI, errMsg A, BUEH 

* errMsg:f(llfilT fO E El 

* data: KAEARFEIEIEE, EXE HIE T UE 


xy 
data class ServerResult«T» (var retCode: Int,var errMsg: String?,var data: T?) { 
constructor(retCode: Int) : this(retCode,null,null) { 
this.retCode - retCode 
} 


constructor (retCode: Int, errMsg: String): this(retCode,errMsg,null) { 
this.retCode = retCode 
this.errMsg = errMsg 


} 


这 个 类 有 三 个 字段 。data 是 服务 端 返回 的 真正 数据 。retCode 表示 服务 端 处 理 是 否 成 功 。 
服务 端 处 理 如 果 失 败 ，errmsg 就 会 有 值 ， 它 的 值 是 错误 信息 ， 而 此 时 data 无 值 ， 如 果 成 功 ， 
errmsg 无 值 ，data 有 值 。 还 有 一 点 要 注意 ， 这 个 类 是 一 个 范 型 ， 范 型 参数 是 data 的 类 型 。data 
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可 能 是 任何 类 型 ， 于 是 定义 成 范 型 ， 在 使 用 时 再 决定 是 什么 类 [十 snare = @@ 三立 一 
型 ， 这 样 就 可 以 利用 Retrofit 的 JSON 转换 能 力 了 。 文 件 如 图 ^ ce 


> MM manifests 


20-11 所 示 。 v Bu java 
* Ps com.example.niu.qqapp 
> f» adapter 
2. 准备 库 与 接口 @ ChatActivity 
: x , , G ChatService 

现在 需要 HTTP 网 络 通信 了 ， 首 先 添加 那些 与 网 络 通信 和 ík LoginFragment.kt 

E y-h BE. && MainActivity 
异步 调用 相关 的 库 : jen 

implementation 'com.squareup.okhttp3:okhttp: pina 
4.0.0-alpha01' "n 

implementation 'com.google.code.gson: gson:2.8.5' 

TS 

implementation 'com.squareup.retrofit2: » t» xum Lexample.niu.qqapp (androidi 
retrofit:2.5.0' » f» com.example.niu.qqapp (test) 

implementation 'com.squareup.retrofit2: 
adapter-rxjava2:2.5.0' 图 20-11 


implementation 'com.squareup.retrofit2:converter-gson:2.5.0' 
implementation 'io.reactivex.rxjava2:rxjava:2.2.8' 
implementation 'io.reactivex.rxjava2:rxandroid:2.1.1' 


由 于 使 用 Retrofit 进行 通信 ， 因 此 要 定义 包含 网 络 访问 方法 的 接口 ， 名 为 ChatService， 并 
为 它 添加 一 个 提交 注册 信息 的 方法 ， 代 码 如 下 : 
interface ChatService { 
GMultipart 
GPOST ("/apis/register") 
fun requestRegister( 
GPart fileData: MultipartBody.Part, 
GQuery("name") name: String, 
GQuery("password") password: String 
): Observable«ServerResult«ContactsPageListAdapter.ContactInfo»» 


} 

可 以 看 到 注册 请 求 的 路 径 是 “/apis/register”， 要 求 以 Post 方式 上 传 数据 ， 要 求 数据 打包 
形式 为 “MultiPart/form-data”, form 中 的 数据 有 图 像 ( 对 应 参数 fileData)、name 和 password。 
其 返回 类 型 为 RxJava 中 的 Observable， 这 样 才能 与 RxJava 结合 。 需 要 注意 的 是 Observable 的 
范 型 参数 为 ServerResult， 它 就 是 Observable 输入 数据 的 类 型 。ServerResult 是 一 个 范 型 ， 其 范 
型 参数 ContactsPageListAdapter.ContactInfo 表示 ServerResult 的 data 字段 类 型 ， 这 个 类 型 必须 
与 服务 端 返回 的 数据 一 致 ， 所 以 是 由 服务 端 决定 的 。 

参数 的 注解 @Query 表示 变量 的 值 以 HTTP 请 求 参数 的 方式 传 给 服务 端 。 如 果 使 用 HTTP 
GET 方式 发 出 请 求 ， 那 么 此 参数 的 值 会 被 放 入 URL. 中 。 假 设 调 用 某 个 方法 时 传 入 参数 : 


requestXXX ("userl","xxx"); 


就 会 形成 这 样 的 URL: “HTTP:// 主 机 地 址 :端口 /apis/login?name=userl&password=xxx”。 
可 见方 法 的 参数 变 成 了 “key=value” 的 形式 。 其 中 ，key 是 @Query("name" 中 的 字符 串 
"name", value 就 是 参数 中 包含 的 值 。 此 处 指定 使 用 HTTP POST 方式 ， 所 以 方法 的 参数 会 以 
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“name=userl&password=xxx” 的 形式 放 到 HTTP 包 的 主体 部 分 而 不 是 放 到 URL. 中 。 
很 多 时 候 我 们 可 以 在 浏览 器 中 看 到 请 求 的 结果 (很 多 时 候 是 不 可 以 的 , 这 取决 于 服务 端 罗 
$) 。 比 如 在 浏览 器 的 地 址 栏 中 输入 地 址 (必须 在 Web 服务 程序 运行 后 ) 
“http://localhost:8080/apis/login?name=tom&password=000”， 可 以 看 到 这 样 的 结果 : 


("retCode":0, "errMsg":null,"data":("name":"xxx","status": "ÍEÉE, "avatar": 
"image/head/1.png"])] 


这 段 JSON 文 本 表示 的 就 是 一 个 ServerResult 对 象 , 它 的 data 字 段 保存 的 是 一 个 ContactInfo 
对 象 ({"name":"xxx","status":" 在 线 ", "avatar":"image/head/1.png"]) . ContactInfo 类 保存 
了 联系 人 的 信息 ， 服 务 端 定义 了 它 ， 并 在 向 客户 端 返回 数据 时 把 它 转换 成 JSON。 服 务 端的 定 
义 是 这 样 的 《Java 代码 ) : 


class ContactInfo implements Serializable( 
private String avatarURL; //J/$ URL 
private String name; // 名 字 
private String status; //#Æ 


public ContactInfo(String avatar, String name, String status) { 
this.avatarURL - avatar; 
this.name - name; 
this.status - status; 


) 


public String getAvatarURL() ( 
return avatarURL; 


) 


public String getName() ( 
return name; 


) 


public String getStatus() ( 
return status; 
) 
} 


它 与 ContactsPageListAdapter.ContactInfo 类 几乎 一 样 ， 除 了 表示 头像 的 字段 ， 我 们 应 该 采 
用 服务 端的 ContactInfo 才能 在 App 中 把 服务 端 传 来 的 JSON 转换 成 ContactInfo 对 象 , 所 以 把 
ContactsPageListAdapter.ContactInfo 改 一 下 ， 与 服务 端的 定义 一 致 : 
/ HERR AUR 
data class ContactInfo( 
val avatarURL: String, //J/$ 
val name: String, //£ 
val status: String //#Æ 
) 


头像 属性 不 再 是 一 个 Bitmnap， 而 是 一 个 路 径 。 这 个 路 径 是 URL 的 一 部 分 ， 比 如 一 幅 图 像 
的 URL 是 “HTTP://10.0.2.2/image/head/1.png”， 那 么 这 个 路 径 就 是 “image/head/1.png”。 
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注意 , 这 里 的 改动 会 引起 ContactsPageListAdapter 的 onBindNodeViewHolder() 77 i: P H1 9l 
语法 错误 ， 主 要 是 绑 定 行 中 ImageView 的 内 容 时 出 错 。 现 在 每 行 的 图 像 需 要 先 通过 URL 地 址 
下 载 再 设置 到 ImageView 中 ， 而 且 这 个 工作 要 异步 进行 ， 想 想 是 挺 麻 烦 的 ， 但 是 不 要 慌 ， 有 
好 用 的 第 三 方 库 , 我 们 可 以 利用 它 轻 易 完成 此 事 。 这 个 后 面 再 讲 , 这 里 先 把 出 错 的 语句 注释 掉 。 
还 有 可 能 出 错 的 地 方 是 MainFragment 中 向 “tree” 中 添加 联系 人 的 语句 ， 比 如 : 

val contactl = ContactsPageListRdapter .ContactInfo(""，" 王 二 "，"[ 在 线 ] 我 是 王 二 ") 

主要 是 ContactInfo 构造 方法 的 第 一 个 参数 现在 应 是 String 类 型 ， 可 暂时 传 入 空 字符 串 : 


val contactl = ContactsPageListRdapter.ContactInfo(""，" 王 二 "，" [在 线 ] 我 是 王 二 ") 


GSON 不 能 正确 转换 ( 反 序 列 化 ) Boolean 类 型 数据 ， 不 知道 以 后 能 不 能 改正 。 


3. 创建 Retrofit 相关 实例 
下 一 步 ， 在 RegisterActivity 中 创建 Retrofit 类 型 的 属性 ， 保 存 Retrofit 实例 : 


private var retrofit: Retrofit? = null 


在 onCreate0 中 创建 Retrofit 实例 ， 后 面 就 可 以 随时 使 用 它 : 


//Él& Retrofit HR 

retrofit = Retrofit.Builder() 
//.baseUr1l ("http://10.0.2.2:8080") // EMPIEZE 
.baseUrl ("http://192.168.3.13:8080") // IE Eg P MLduz fr 
LLKKEEEUIDESR IIBER Call, HrTJUIEUE BISHER T Observable, 
JL BEDILATEBE Ca 11 ARH Observable -4 Call HARK 
.addCallAdapterFactory (RxJava2CallAdapterFactory.create ()) 
//Json STE AJH e 


.addConverterFactory (GsonConverterFactory.create ()) 
-build() 


ChatService 实例 在 一 个 Activity 中 只 需 一 个 即 可 , 所 以 我 们 也 把 它 保存 在 Activity 的 一 个 
属性 中 : 

private var chatService :ChatService? = null 
并 且 在 Activity 初始 化 时 创建 它 ， 当 然 是 在 Retrofit 被 创建 之 后 了 : 
//É8l& service RIR 


chatService = retrofit?.create(ChatService::class.java) 

4. 响应 提交 按钮 

响应 提交 按钮 的 单 击 事件 ， 创 建 Multipart 表单 数据 ， 向 服务 端 提交 : 
IHE TERRA, ERE 


buttonCommit.setOnClickListener ( vl -» 
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// 产 生 交 ff Part 

val filePart = createFilePart() 

//PAE X Part 

val name = editTextName.text.toString() 

val password = editTextPassword.text.toString() 

//A Retrofit ŽK RxJava observable J/$t 

val observable = chatService?.requestRegister(filePart!!, name, password) 


// RERE EHe 
observable! !.map{ 
if (it.retCode 0) { 
it.data! !//¥FI}Æ—f ContactsPageListAdapter.ContactInfo 
}else{ 
throw RuntimeException (it.errMsg) 


} 
} .subscribeOn (Schedulers.computation()) 
-observeOn (AndroidSchedulers.mainThread()) 
//Observer fil 2H «2/2057 map Hih 2827 —90 
-subscribe(object : io.reactivex.Observer«ContactsPageListAdapter. 
ContactInfo»( 
override fun onSubscribe(d: Disposable) ( 


) 


override fun onNext (contactInfo: 
ContactsPageListAdapter.ContactInfo) ( 
IHE EMRI 
Snackbar.make (v1，" 注 册 成 功 ! ", Snackbar.LENGTH LONG) 
-SetAction("Action", null).show() 
// Xll Activity, 次 全 OK 
val intent - Intent() 
setResult(Activity.RESULT OK) 
finish() 
) 


override fun onError(e: Throwable) ( 
/LHEB BIBEEERUPM, ERRIA 
val errmsg - e.localizedMessage 
Snackbar.make(vl, '"AXARHT:"- errmsg!!, Snackbar.LENGTH LONG) 
-SetAction("Action", null).show() 
Log.e("qqserver", e.localizedMessage!!) 


) 


override fun onComplete() ( 
) 
H 
} 


代码 没有 什么 难 理解 的 ， 还 是 利用 Retrofit-RxJava 进行 异步 网 络 访问 。subscribe0 方 法 的 
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参数 是 一 个 Observer 对 象 ， 而 不 是 Lambda， 主 要 是 要 传 入 太 多 的 Lambda， 看 起 来 很 费劲 ， 
所 以 改 为 用 一 个 Observer 匿名 子 类 来 实现 几 个 回调 方法 。 

需要 注意 的 是 传 给 map. subscribe 等 方法 的 参数 ， 其 类 型 名 (如 Function, Observer 等 ) 
都 不 止 在 一 个 包 中 出 现 ， 所 以 在 通过 “Alt+Enter” 键 自动 导入 类 时 可 能 导入 错误 ， 实 在 不 行 
就 写 类 的 全 名 ， 比 如 “io.reactivex.Observer”。 

createFilePart() 方 法 用 于 产生 MultiPart 表单 中 的 一 个 Part， 代 码 如 下 : 


Private fun createFilePart(): MultipartBody.Part? { 
if (this.imageUri == null) ( 
// 必 须 育 一 个 Part Afr, BrEL EJ —h 
return MultipartBody.Part.createFormData ("none", "none") 


) 


var inputStream: InputStream? = null 

var data: ByteArray? - null 

try ( 
inputStream = contentResolver.openInputStream(this.imageUri!!) 
data = ByteArray(inputStream!!.available()) 
inputStream.read (data) 

) catch (e: FileNotFoundException) ( 
e.printStackTrace() 
return null 

) catch (e: IOException) ( 
e.printStackTrace() 
return null 


) 


val requestFile = data.toRequestBody (MediaType.parse("application/ 


otcet-stream")) 
return MultipartBody.Part.createFormData("file", "png", requestFile) 


) 
5. 一 个 小 错误 
在 编译 时 遇 到 了 一 个 错误 ， 如 图 20-12 所 示 。 解 决 这 个 错误 很 简单 ， 把 Java 的 语法 兼容 
性 提升 到 1.8 即 可 ， 如 图 20-13 所 示 。 


Build: Build Output Sync 

4 7 © Build: build feiled «t 2015/5/3 s s at com.google.common.cache. Localcach| 

7 Q Run build F^ workspace 3 at com.google.common.cache. Localcach| 

"n > v Load build at java.util.optional.orElsecet(opti 
» w Configure build 270 ms 15: aore 


Ru 
* A Kotiin compiler: (16 warnin The dependency contains Java 8 bytecode. 
Y B F:/workspace/android/bi android 
Y 9» app/src/main/java (11 compileoptions { 

> $$ com/example/niu/. sourceCompatibility 1.8 

fg com/example/niu/ targetCompatibility 1.8 

» de comexample/niuj } 

» (i com/example/niu/ 


* Cus by: con.android.builder.dexing.De 


'developer.android.com/studio| 


20-12 
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e Modules — Properties Default Config Signing Configs 
4 +- 
Project Compile Sdk Version 
Š Bs app 
SDK Location android-Q (AFI 28+- Android API 28, Q preview [Preview -| 
Variables 


Build Took Version 
2900 13 2905 - 


Mod 


Dependencies Source Compatibility 
Build Variants 18 
Target Compatibility. 
Suggest. O — 
20-13 
6. 停止 订阅 


最 后 ， 在 Activity 关闭 时 应 停止 网 络 通信 。 这 个 我 们 前 面 讲 过 了 ， 利 用 Retrofit 调用 链 所 
返回 的 Disposable 在 onStop0 中 取消 订阅 即 可 。 但是， 与 Retrofit 结合 后 ，subscribe0 方 法 返回 
的 却 不 是 Disposable Y, 而 是 Unit. 怎么 办 呢 ? 还 是 有 办 法 的 , 在 前 面 的 代码 中 , 为 subscribe) 
传 入 的 参数 是 Observer， 已 经 实现 了 Observer 的 方法 : 


override fun onSubscribe(d: Disposable) ( 


) 
此 方法 的 参数 正好 是 一 个 Disposable, 我 们 要 做 的 就 是 把 这 个 参数 保存 成 Activity 的 属性 ， 
然后 在 onStop0 中 使 用 它 。 此 方法 的 实现 如 下 : 
override fun onSubscribe(d: Disposable) { 
this8RegisterActivity.disposable = d 
} 


Activity 的 onStopO 实 现 如 下 : 


override fun onStop() ( 
this.disposable?.let ( 
if (!it.isDisposed)( 
it.dispose() //JZ Hil 
} 
} 
super.onStop() 
} 


注意 ! 测试 注册 功能 时 ， 必 须 先 启动 Web 程序 。 
T. 解决 网 络 错误 


运行 App， 可 能 遇 到 一 些 错误 ， 比 如 图 20-14 所 示 
的 错误 。 20-14 
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这 是 什么 错误 呢 ? 仔细 翻译 一 下 还 是 不 难 理解 的 : 超过 10 秒 没 连接 到 某 个 主机 (如果 用 虚拟 
机 的 话 ， 地 址 应 该 是 10.0.2.2) ， 最 终 连接 失败 。 原 因 可 能 是 主机 网 络 不 通 〈 虚 拟 机 不 存在 这 个 问 
题 ) 或 Web 程序 没 启动 ， 解 决 方案 就 是 确保 主机 与 设备 网 络 连通 并 且 Web 程序 已 正确 启动 。 

还 可 能 出 现 其 他 错误 , 其 实 产生 错误 的 原因 是 复杂 多 样 的 。 比 如 ，App 没有 网 络 访问 权限 
会 出 异常 ， 有 网 络 访问 权限 了 ， 网 络 不 通 也 会 产生 异常 ; 网 络 通 了 ， 服 务 端 没有 启动 还 会 产生 
异常 ， 服 务 端 启动 了 ， 但 没有 响应 App 所 请 求 的 路 径 方 法 又 会 出 异常 ， 请 求 的 路 径 对 了 ， 业 
务 逻 辑 处 理 出 错 也 会 出 异常 。 

解决 错误 的 主要 思路 是 根据 异常 信息 推断 在 哪 一 步 出 了 问题 ,然后 调试 运行 或 输出 日 志 进 
一 步 分 析 和 定位 语句 。 


20,2 改进 登录 功能 


新 的 登录 逻辑 是 这 样 的 : App 将 用 户 名 发 送 到 服务 端 (密码 不 处 理 ) ， 服 务 端 查找 是 否 有 
同名 的 用 户 ， 如 果 有 ， 就 返回 成 功 ; 如 果 没 有 ， 就 返回 失败 ， 失 败 后 用 户 可 以 继续 使 用 其 他 名 
字 登 录 。 

改进 登录 功能 主要 是 添加 网 络 访问 以 实现 后 台 登 录 , 所 以 首先 为 Activity 准备 网 络 访问 所 
需 的 对 象 。 


20.2.1 创建 Retrofit 相关 实例 


Retrofit 或 者 说 ChatService 实例 应 该 是 与 Activity 绑 定 的 ， 所 以 我 们 先 在 Activity 中 创建 
保存 它们 的 属性 并 进行 初始 化 : 


class MainActivity : AppCompatActivity() ( 


// BIf£ oncreate () PEHI, ZET REA 
/LLBEDURT DEI “HEE” ZA, WART o 
private lateinit var retrofit: Retrofit 
private lateinit var chatService :ChatService 
/LLBEFBGHITII 
private var disposable: Disposable? - null 


//&l& Retrofit HR 

retrofit = Retrofit.Builder() 
//.baseUrl("http://10.0.2.2:8080") //ÆÆMIUPEZT 
-baseUrl("http://192.168.3.13:8080") //ÆFHM PZT 
LLKEELUIERIBIBIE Call, HiTHEEEIRIISEAEH T Observable, 
V/F UBRE Call WEH Observable 5 Call HARK 


.addCallAdapterFactory (RxJava2CallAdapterFactory.create ()) 
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//JSON S E AZF He 


.addConverterFactory (GsonConverterFactory.create()) 
-build() 


//É&l& Chatservice ø 
chatService = retrofit.create(ChatService::class.java) 


还 要 在 Activity 关闭 时 停止 网 络 通信 : 


override fun onStop() ( 
this.disposable?.let ( 
if (!it.isDisposed)( 
it.dispose() //ZGHiIM 
) 
) 
super.onStop() 
} 


20.2.2 添加 Fragment 回调 接口 


在 实现 网 络 通信 之 前 ， 还 有 个 问题 要 考虑 一 下 : 登录 页 面 是 一 个 Fragment, WE 
MainActivity 中 ， 而 Retrofit 或 者 说 ChatService 实例 是 与 Activity 绑 定 的 ，Fragment 需要 通过 
Activity 得 到 这 些 对 象 , 这 里 涉及 底层 调用 上 层 功 能 的 问题 。 根 据 前 面 讲 Fragment 章节 所 述 的 
观点 , 为 了 封装 性 ， 下 层 不 应 该 知道 上 层 是 谁 ， 下 层 调用 上 层 的 功能 要 借助 接口 ， 所 以 我 们 添 
加 一 个 接口 (创建 LoginFragment 时 我 们 没有 在 向 导 中 选择 创建 接口 ) ， 把 它 放 在 单独 的 文件 
中 ， 名 字 叫 FragmentListener， 代 码 如 下 : 

//Activity HHO, 79 Fragment PRZ 


public interface FragmentListener ( 
) 


访问 Web 服务 器 需要 用 到 ChatService 实例 ,我 们 为 接口 ChatService 添加 这 样 一 个 方法 : 


interface FragmentListener { 
fun getChatServcie() : ChatService 
} 
MainActivity 需要 实现 它 ， 以 返回 它 所 保存 的 ChatService 实例 : 
class MainActivity : FragmentListener,AppCompatActivity() { 


override fun getChatServcie(): ChatService { 
return chatService 
) 
} 
凡是 想 调用 FragmentListener 中 方法 的 Fragment 25, 都 需要 创建 一 个 成 员 变 量 来 保存 这 个 
接口 ， 所 以 先 在 LoginFragment 中 创建 属性 : 
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class LoginFragment : Fragment() { 


private var fragmentListener: FragmentListener? — null 


什么 时 候 保存 下 接口 实例 呢 ? 最 好 的 时 机 就 是 Fragment 刚刚 附着 到 Activity 上 的 时 候 ， 
所 以 重 写 Fragment 的 onAttach() 方 法 : 


override fun onAttach(context: Context) { 
super.onAttach (context) 
if (context is FragmentListener) ( 
fragmentListener = context 
) 
) 


当 Fragment 脱离 Activity 的 时 候 , 要 保证 接口 不 再 有 效 , 所 以 实现 Fragment 的 onDetach( 
方法 : 
override fun onDetach() { 


super.onDetach() 
fragmentListener = null 


) 
最 后 ， 还 要 添加 发 出 登录 请 求 的 方法 ， 当 然 是 在 ChatService 中 了 : 


GGET ("/apis/login") 
fun requestLogin( 
@Query ("name") name: String, 
GQuery("password") password: String? 
): Observable«ServerResult«ContactsPageListAdapter.ContactInfo»» 


至 此 ， 网 络 访问 的 前 期 工作 就 完成 了 。 
20.2.3 ”发 出 登录 请 求 


下 面 改 一 下 响应 登录 按钮 的 侦 听 器 ， 改 成 先 发 出 登录 请 求 ， 当 请 求 成 功 后 再 跳 转 到 
MainFragment 页 面 ， 代 码 如 下 : 
// HERREURE 


buttonLogin.setOnClickListener ( 
LHP. REMER HERR 
val username = editTextQONum.text.toString() 
val observable = fragmentListener!!.getChatServcie () .requestLogin 
(username, null) 
observable.map { result -> 
LIBI JU B EHE BT 
if (result.retCode --- 0) ( 
/LLHIRARCER R, HFE IRIE 


result.data 
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} else { 
LLLA HET, MHF, Æ observer PZ 
throw RuntimeException (result.errMsg) 

) 

} .subscribeon (Schedulers.computation()) 

-observeOn (AndroidSchedulers.mainThread()) 

-subscribe (object : Observer«ContactsPageListAdapter.ContactInfo?» ( 
override fun onSubscribe(d: Disposable) ( 


) 


override fun onNext (contactInfo: 
ContactsPageListAdapter.ContactInfo) ( 

LLEBEERHA TT, BORD, LA ERU 
val fragmentManager = activity!!.supportFragmentManager 
val fragmentTransaction = fragmentManager.beginTransaction() 
val fragment = MainFragment() 
// Bihi FrameLayout PHAHI Fragment 
fragmentTransaction.replace(R.id.fragment container, fragment) 
fragmentTransaction.commit() 


) 


override fun onError(e: Throwable) ( 
/LHEBBIBEXEERUP, ERRE 
val errmsg - e.localizedMessage 
Snackbar.make (layoutContext, "大 王 祸 事 了 : " + errmsg!!, 
Snackbar.LENGTH LONG) 
-SetAction("Action", null).show() 
Log.e("qqserver", e.localizedMessage!!) 


) 


override fun onComplete() ( } 
n 
) 


需要 注意 的 一 个 地 方 是 map0 方 法 , 为 其 传 入 的 Lambda 的 参数 类 型 由 Observable<> 的 范 型 参 
数 决定 ， 这 里 是 ServerResult。 于 是 在 Lambda 中 判断 ServerResult 的 code 属性 是 否 为 0， 如 果 是 
0， 说 明 服务 端 执行 正确 ， 于 是 返回 Contactinfo 对 象 ， 此 对 象 最 终 给 了 Observer (Observer 的 范 型 
参数 是 “ContactsPageListAdapter.ContactInfo?”。 如 果 不 是 0， 说 明 有 错 ， 直 接 抛 出 异常 。 那 么 异 
常 在 哪里 捕获 呢 ? Observer 的 匿名 子 类 实现 了 一 个 方法 onEmror0， 它 的 参数 就 是 一 个 异常 ， 也 就 
是 说 在 订阅 过 程 中 抛 出 的 异常 最 终 会 传 到 Observer 的 onEror0 中 ， 而 这 个 方法 是 在 观察 者 线程 中 
执行 的 ， 而 我 们 设置 观察 者 线程 为 主线 程 ( 见 observeOn(AndroidSchedulers.mainThread)) ， 所 


以 在 此 方法 中 可 以 直接 操作 UI。 
运行 App 测试 一 下 ， 注 意 要 输入 已 注册 的 用 户 名 ， 密 码 无 所 谓 ， 因 为 服务 端 并 没有 对 密 
码 进行 匹配 。 


402 


第 20 章 实现 聊天 功能 


20.24 保存 自己 的 信息 


登录 请 求 返回 的 是 自己 的 信息 ， 需 要 保存 下 来 ， 因 为 在 聊天 时 要 用 。 
信息 是 登录 时 自己 输入 的 , 直接 在 Android 端 保存 下 来 不 就 行 了 ,为 什么 还 要 服务 端 返 
一 次 ， 再 保存 下 服务 端 返回 的 数据 呢 ? 答案 很 简单 : 因为 这 是 普遍 的 处 理 方式 ! 当 我 们 开发 一 
个 大 型 项 目 时 ,用 户 信息 是 很 复杂 的 ， 不 像 例子 中 这 么 简单 ,所 以 上 传 用 户 名 和 密码 登录 成 功 
后 , 服务 端 会 把 完整 用 户 信息 返回 。 即 使 我 们 这 么 简单 的 类 , 也 有 一 个 字段 的 值 是 服务 端 给 的 ， 
那 就 是 头像 (avatarURL ) 。 
这 个 信息 保存 在 哪里 呢 ? 可 以 预见 这 是 各 个 页 面 都 可 能 用 到 的 数据 , 所 以 Activity 就 是 最 
好 的 保存 场所 ， 由 于 它 只 有 一 份 ， 也 就 是 一 个 单 例 ， 所 以 可 以 置 成 类 的 伴随 对 象 。 为 
MainActivity 类 添加 伴随 对 象 ， 代 码 如 下 : 
class MainActivity : AppCompatActivity() ( 
/ LEX TEBIXER, IST Java "Ff static 
companion object ( 
// RFA CHIKPI E 


var myInfo: ContactsPageListAdapter.ContactInfo? = null 


Ini 


然后 在 获取 到 服务 端 返 回 的 信息 后 保存 下 来 〈 粗 体 语句 ) : 


override fun onNext(contactInfo: ContactsPageListAdapter.ContactInfo) ( 
LTHRBET A RIRE 


MainActivity.myInfo = contactInfo 


LLEBERBHA TT, ERR, AAEH 

val fragmentManager = activity!!.supportFragmentManager 

val fragmentTransaction - fragmentManager.beginTransaction() 
val fragment - MainFragment() 

// E I FrameLayout PHAHI Fragment 
fragmentTransaction.replace(R.id.fragment container, fragment) 
fragmentTransaction.commit () 


20.25 ”防止 按钮 重复 单 击 


当 我 们 快速 重复 单 击 当前 的 登录 按钮 时 , 它 会 重复 执行 登录 逻辑 , 于 是 会 发 出 多 次 网 络 请 
求 ， 这 显然 有 问题 。 我 们 应 该 防止 按钮 频繁 的 重复 响应 单 击 事件 ， 借 助 RxJava 很 容易 实现 。 
但 是 在 实现 这 个 功能 前 ， 我 们 先 用 RxJava 的 方式 把 按钮 单 击 事件 的 响应 代码 改写 一 下 ， 具 体 
如 下 : 

LLBLBEECRACEII E to EF 

RxView.clicks (buttonLogin).subscribe( 


// HEARE, fflonclick () PRERE 
} 
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解释 一 下 这 段 代 码 : RxView 是 为 了 在 Android 的 View 上 使 用 RxJava 而 定义 的 类 ， 有 很 
多 这 样 的 类 ， 都 以 Rx 开头 ， 对 应 着 不 同 的 View， 比 如 对 应 Textview 的 有 RxTextView。 到 底 
使 用 哪个 类 得 看 情况 ， 虽 然 有 一 个 更 接近 Button 类 的 RxCompoundButton 类 ， 但 是 由 于 我 们 
只 是 响应 单 击 事件 ， 而 这 个 事件 在 基 类 View 中 就 提供 了 ， 所 以 就 没 必 要 使 用 更 顶端 的 类 了 。 

调用 clicks0 会 创建 一 个 Observable，clicks0 参 数 是 要 响应 的 View。 然 后 调用 subscribe() 
订阅 了 这 个 Observable， 订 阅 时 传 入 了 一 个 Lambda 作为 参数 ， 这 个 Lambda 就 相当 于 
onClickListener 的 onClick()77 iX . 

这 样 一 来 ， 事 件 响 应 变 成 了 RxJava 方式 ， 于 是 防止 重复 响应 事件 就 变 得 很 简单 ， 只 需 调 
用 一 个 方法 throttleFirst0 即 可 ， 有 具体 如 下 : 

// ERREA B t 

RxView.clicks (buttonLogin) 

.throttleFirst(10, TimeUnit.SECONDS) 


.subscribe ( 


throttleFirst() 方 法 表示 在 某 一 段 时 间 内 只 取 第 一 次 事件 ， 这 里 指定 的 是 10 fh. 

现在 的 问题 应 该 是 类 RxView 不 能 被 导入 ， 原 因 是 没有 依赖 所 在 的 库 〈RxBinding) 。 它 
的 主要 作用 是 将 Android 控件 的 事件 响应 以 RxJava 方式 处 理 ， 因 为 事件 响应 是 异步 调用 。 

虽然 现在 能 防止 频繁 响应 单 击 了 ， 却 还 不 完美 ， 因 为 无 法 做 到 “在 响应 过 程 中 不 再 响应 ， 
直到 处 理 完 服务 端 返 回 的 数据 再 响应 ”的 行为 模式 。 要 达到 这 种 行为 模式 有 多 种 做 法 ， 下 面 结 
合 进度 条 的 显示 演示 一 种 做 法 。 


20.26 ”显示 进度 条 


一 般 情况 下 , 凡是 耗 时 的 操作 都 要 用 进度 条 或 表示 进度 的 动画 来 提示 用 户 : “App 正在 努 
力 干 活 ， 不 要 着 急 ……”， 所 以 我 们 也 加 一 个 。 

思路 是 这 样 的 ， 将 一 个 PopupWindow 显示 于 主 内 容 容器 的 上 面 ， 在 这 个 PopupWindow 
上 显示 一 个 圆 形 进度 条 。 进 度 条 分 两 种 : 一 种 是 长 的 ， 能 设置 进度 ; 一 种 是 圆 的 ， 就 是 一 直 在 
转 ， 看 不 出 进度 。 因 为 网 络 操作 无 法 得 到 其 进度 ， 所 以 我 们 用 圆 的 。 

PopupWindow 是 一 种 Window， 是 真正 承载 界面 的 ， 设 置 给 Activity 的 Layout 最 终 是 显 
IRTE Window 中 。 所 以 要 在 一 个 页 面 上 履 盖 一 层 界面 最 简单 的 方式 就 是 使 用 Window。 菜 单 也 
是 依托 于 PopupWindow 才 显 示 在 其 他 控件 之 上 的 。 

下 面 是 显示 进度 条 的 代码 : 

1/1 ESRERESE 

override fun showProgressBar() { 

// Mia —fh Popiindow, EXS Window fft 
11ER 
val progressBar = ProgressBar (this) 


//LLRBERERE A ORKEN EA, BET DUBIE EIE 
// ŽA 
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popupDialog = PopupWindow( 
progressBar, 
ViewGroup.LayoutParams.MATCH PARENT, 
ViewGroup.LayoutParams.MATCH PARENT 
) 
/L HESS HERE BELLE 408 EUR, DUSCHE EERCREIBEAUR. 
window.attributes.alpha - 0.4f 
LL AUNAEÉRESE BILL, MERE Fragment BrikBUZEAS P, SERIUUE dt Fragment HAA 
popupDialog?.showAtLocation(fragment container, Gravity.CENTER, 0, 0) 
) 


这 是 隐藏 进度 条 的 代码 : 
/LLBROEAESE 


override fun hideProgressBar() ( 
popupDialog?.dismiss() 
window.attributes.alpha = 1f 
) 


这 两 段 代 码 放 到 哪里 呢 ? 可 以 放 在 LoginFragment 中 ， 但 是 放 在 Activity 中 更 好 ， 如 果 别 
的 Fragment 也 需要 使 用 进度 条 , 那么 这 两 个 方法 就 能 被 重复 使 用 了 。 这 两 个 方法 要 供 Fragment 
使 用 ， 所 以 还 要 在 Fragment 的 服务 接口 中 添加 ， 具 体 如 下 : 


interface FragmentListener { 
fun getChatServcie() : ChatService 
fun hideProgressBar() 
fun showProgressBar() 


) 


变量 popupDialog 是 MainActivity 的 属性 ， 可 自行 创建 。 
现在 可 以 让 进度 条 参与 到 登录 过 程 了 ， 修 改 登录 业务 代码 ， 具 体 如 下 : 
// GERAAK AE 


RxView.clicks (buttonLogin) 
.throttleFirst(10, TimeUnit.SECONDS) 
.subscribe ( 
// BB BERG 8, ffonclick () PRIEKI 
LB, POBRE RE HLECRÉOK. 
val username = editTextQQNum.text.toString() 
val observable = fragmentListener!'.getChatServcie().requestLogin 
(username, null) 
observable.map ( result -> 
)-.subscribeOn(Schedulers.computation()) 
-observeOn (AndroidSchedulers.mainThread()) 
-doFinally ( fragmentListener?.hideProgressBar() } 
.subscribe (object : Observer«ContactsPageListAdapter.ContactInfo?» ( 


override fun onSubscribe(d: Disposable) ( 
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/IHEBADEEERE 


fragmentListener?.showProgressBar() 
i 


override fun onNext (contactInfo: 
ContactsPageListAdapter.ContactInfo) { 

j 

override fun onError(e: Throwable) ( 


) 
override fun onComplete() {} 
n 
} 
粗 体 部 分 是 改动 或 新 增 的 代码 。 在 Observer 的 onSubscribe() 
中 调用 方法 showProgressBar0 显 示 了 进度 条 , 那么 隐藏 进度 条 的 
代码 在 哪里 呢 ? 当 整 个 过 程 完成 后 ,不论 是 成 功 还 是 失败 ， 都 应 
该 隐藏 进度 条 ,所 以 可 以 在 onError0 和 onComplete0 中 都 隐藏 进 
度 条 ， 其 实 有 个 更 好 的 地 方 ， 即 Observable 的 doFinally0， 和 
try..catch 中 的 finally 一 样 ， 就 是 不 论 成 功 还 是 失败 〈 或 取消 ) 
都 会 被 执行 。doFinally0 的 参数 是 一 个 Lambda， 在 这 个 Lambda 
中 调用 方法 hideProgressBar() 来 隐藏 进度 条 。 
图 20-15 是 进度 条 效果 。 
至 此 ， 登 录 功 能 完成 。 下 一 步 是 实现 网 络 聊天 吗 ? 不 是 , 我 
们 应 先 把 联系 人 从 服务 端 下 载 下 来 ， 有 了 联系 人 才能 聊天 。 图 20-15 


20.3 获取 联系 人 


联系 人 这 个 页 面 其实 是 MainFragment 中 的 一 个 Tab 页 ， 当 前 为 它 造 了 一 些 数据 来 显示 ， 
方法 是 MainFragment 的 createContactsPage0。 我 们 需要 改 一 下 ， 只 造 组 ， 不 造 联系 人 ， 因 为 
联系 人 改 为 从 服务 端 下 载 。 所 以 将 造 联系 人 的 语句 删 掉 ， 即 : 

B LE, BRAGE 

I8 


var bitmap = BitmapFactory.decodeResource (getResources(), R.drawable. 


contacts normal) 


// 辟 条 人 1 
val contactl = ContactspageListAdapter.ContactInfo(""，" 王 二 "，" [在 线 ] 我 是 王 二 ") 
I8 
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bitmap = BitmapFactory.decodeResource (getResources(), 

R.drawable.contacts normal) 
/HBRKA 2 
val contact2 = ContactsPageListRdapter.ContactInfo (""，" 王 三 "，" [离线 ] 我 没有 状态 ") 
/ LSIUBINBUR A 
tree.addNode(groupNode2, contactl, R.layout.contacts contact item) 
tree.addNode(groupNode2, contact2, R.layout.contacts contact item) 


我 们 从 服务 端 获取 到 联系 人 后 ,把 它们 放 到 “我 的 好 友 ” 组 中 。 为 了 方便 访问 组 节点 , 把 
groupNode 变量 设 为 MainFragment 的 私有 属性 : 

private lateinit var groupNodel:ListTree.TreeNode 

private lateinit var groupNode2:ListTree.TreeNode 

private lateinit var groupNode3:ListTree.TreeNode 

private lateinit var groupNode4:ListTree.TreeNode 

private lateinit var groupNode5:ListTree.TreeNode 


注意 它们 都 是 lateinit 属性 ， 因 为 在 onCreate0 中 它们 被 赋值 ， 之 后 就 一 直 存 在 ， 所 以 设 成 
lateinit 比较 适合 。 
下 一 步 为 Retrofit 接口 添加 新 的 方法 ， 以 实现 从 Web 服务 端 获取 联系 人 的 功能 。 


20.3.1 修改 Retrofit 接口 


Web 服务 端 已 经 为 客户 端 提供 了 获取 联系 人 数据 的 地 址 , 其 路 径 是 “apis/get_contacts”， 
返回 的 是 ServerResult， 但 是 ServerResult 的 data 字段 是 一 堆 联 系 人 的 信息 (一 个 数组 ，。 为 
了 能 向 这 个 路 径 发 出 请 求 并 获取 数据 ,我 们 需要 在 ChatService 接口 中 添加 新 方法 getContact(): 

GGET ("/apis/get contacts") 

fun getContacts(): Observable«ServerResult«List«ContactsPageListAdapter. 
ContactInfo»»» 

然后 就 可 以 调用 它 了 ， 那 么 调用 代码 放 在 哪里 呢 ? 应 该 放 在 MainFragment 中 。 在 
MainFragment 的 初始 化 时 发 出 请 求 比较 好 。 但 是 ， 这 会 造成 每 次 创建 Fragment 时 都 获取 一 次 
联系 人 , 如 果 是 联系 人 数量 很 多 , 那么 这 个 地 方 就 需要 优化 一 下 了 , 比如 提供 本 地 缓存 。 另 外 ， 
应 该 设置 一 个 定时 器 , 每 隔 一 段 时 间 请 求 一 下 所 有 联系 人 信息 。 这 样 做 的 目的 一 是 取得 新 登录 
的 联系 人 ， 二 是 取得 现 有 联系 人 状态 的 变化 (比如 离线 、 上 线 ) 。 如 果 联 系 人 很 多 ， 还 要 考虑 
优化 网 络 传输 、 每 次 仅 传输 变化 的 数据 等 。 要 做 一 个 像 QQ 这 样 复 杂 的 聊天 App 其 实 是 很 烦 
琐 的 ， 要 考虑 很 多 细节 ， 这 里 没有 那么 全 面 ， 但 也 尽量 向 那个 方向 靠拢 ， 比 如 实现 定时 获取 联 
系 人 信息 。 


20.3.2 ”使 用 RxJava 定时 器 


Android SDK 中 带 有 定时 器 API， 但 是 我 们 既然 用 了 RxJava， 那 就 用 RxJava 来 创建 定 
时 器 。 

在 Fragment 的 onCreate() 方 法 中 创建 定时 器 , 在 定时 器 中 每 间隔 一 段 时 间 请 求 一 下 联系 人 
列表 ， 代 码 如 下 : 
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Observable.interval(20, TimeUnit.SECONDS).subscribe( 
/ EÈ BIBERUR A KRE 

l 

这 段 代 码 的 意思 是 利用 Observable 的 工厂 方法 interval 8] ££ —^* Observable 对 象 ， 创 建 
时 指定 每 隔 20 秒 执行 一 次 subscribe0 的 回调 函数 (是 一 个 Lambda, 相当 于 Observer 的 onNextO )。 
我 们 可 以 把 网 络 请 求 的 代码 放 到 Lambda H, 但 是 这 样 真 的 可 以 吗 ? 想 一 想 ， 定 时 器 到 了 时 间 
就 会 调用 Lambda， 从 而 发 出 网 络 连接 ， 如 果 在 20 秒 内 上 一 次 的 请 求 还 未 执行 完 又 发 出 了 新 
的 请 求 ， 是 不 是 不 合理 呢 ? 所 以 我 们 应 该 保证 在 上 一 次 请 求 执行 完成 后 ， 等 20 秒 再 发 出 下 一 
次 请 求 ! 

其 实现 在 创建 的 Observable 是 没有 问题 的 ， 因 为 它 就 是 这 样 工 作 的 ， 不 管 订阅 与 观察 是 
否 在 同一 个 线程 中 执行 , 它 都 能 保证 定时 触发 的 回调 函数 是 串 行 执行 的 。 之 所 以 这 样 一 惊 一 乍 
的 ， 就 是 希望 我 们 能 考虑 全 面 一 点 。 


20.3.8 添加 Fragment 回调 接口 


像 LoginFragment 一 样 ， 要 访问 网 络 ， 必 须 通过 MainActivity 中 的 Retrofit 对 象 ， 所 以 需 
要 在 MainFragment 中 保存 FragmentListener 实例 ， 才 能 调用 MainActivity 的 功能 。 
首先 添加 FragmentListener 属性 : 


private var fragmentListener: FragmentListener? = null 


然后 重 写 父 类 的 方法 onDetachO 和 onAttachO， 为 这 个 属性 赋值 : 


override fun onAttach(context: Context) { 
super.onAttach (context) 
if (context is FragmentListener) { 
fragmentListener = context 
) 
} 


override fun onDetach() { 
super.onDetach() 
fragmentListener - null 
) 


下 面 就 可 以 进行 网 络 访问 了 。 
20.3.4 获取 并 显示 联系 人 

为 了 显示 联系 人 ， 必 须 通知 RecyclerView 更 新 数据 ， 所 以 我 们 先 把 联系 人 页 面 的 Adapter 
保存 成 MainFragment 的 成 员 变量 ， 这 样 才能 调用 那些 notifyXXXX0 方 法 : 

// ERA Adapter, J T ESERGE I IE 


private var contactsAdapter: ContactsPageListAdapter? = null 


在 MainFragment 的 方法 createContactsPage0 中 ， 将 为 RecyclerView 设置 Adapter 的 地 方 
改 成 这 样 : 
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// EIU IEEE RecyclerVview, SE Él& Adapter 


val recyclerView :RecyclerView - v.findViewById(R.id.contactListView) 
recyclerView.layoutManager = LinearLayoutManager (context) 
contactsAdapter = ContactsPageListAdapter (tree) 

recyclerView.adapter = contactsAdapter 


编写 获取 联系 人 代码 时 ， 我 们 其 实 要 用 到 两 个 Observable: 定时 器 Observable 是 外 部 
Observable， 在 它 的 flatMap0 中 ， 返 回 Retrofit 反射 出 的 用 于 网 络 访问 的 Observable， 负 责 执 
行 定时 任务 ; 内 部 Observable 在 定时 任务 中 负责 发 出 网 络 请 求 ， 而 最 终 订 阅 到 的 是 内 部 
Observable 返回 的 数据 , 这 样 就 完成 了 定时 发 出 网 络 请 求 并 进行 处 理 的 任务 。 代 码 实现 如 下 (在 
MainFragment 的 onCreate0 中 ) : 

// &lg — IERI IS Observable 

Observable.interval(10, TimeUnit.SECONDS) 


-flatMap ( 
/ PUB Hit Re HL TEHUBUR A PIERBUTRGK 


val service = fragmentListener!!.getChatService() 


service.getContacts().map ( 
LLHBHUURUS AGE IHRE, EORIEBIARUR IDEAE 
if (it.retCode -- 0) ( 
it.data 
) else ( 
throw RuntimeException (it.errMsg) 


) 
).subscribeOn(Schedulers.computation()) 


-observeOn (AndroidSchedulers.mainThread()) 
.Subscribe (object : Observer«List«ContactsPageListAdapter.ContactInfo»?» ( 


override fun onSubscribe(d: Disposable) ( 


} 


override fun onNext(contactInfos: List«ContactsPageListAdapter. 
ContactInfo») ( 
LLHBFEBUR AETIRERSI “我 的 好 友 ” A 
/HER, BIEETTHHEATA 
tree.clearDescendant (groupNode2); 
for (info in contactInfos) ( 
val node2 - tree.addNode(groupNode2, info, 
R.layout.contacts contact item) 
VIRAT RET TEREI, Kr 
node2.setShowExpandIcon (false); 
) 
// i8i^ll RecyclerView ZHE 


contactsAdapter!'.notifyDataSetChanged(); 
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override fun onError(e: Throwable) ( 

IEEE 

val errmsg = e.getLocalizedMessage() 

Snackbar.make (contentLayout, "KERST: " + errmsg, 
Snackbar .LENGTH LONG) . show () ; 


[PEIE FRERE 


) 


override fun onComplete() ( 


$ 
}) 


先 看 一 下 传 给 flatMap0 的 Lambda, 在 其 中 我 们 创建 了 用 于 网 络 访问 的 Observable 并 返回 ， 
但 是 在 返回 之 前 ， 为 它 设置 了 map 回调 (一 个 Lambda) ， 虽 然 在 源码 中 省 略 了 ， 但 是 这 个 
Lambda 的 参数 是 ServerResult<List<ContactsPageListAdapter.ContactInfo>>。 我 们 在 map 的 
Lambda 中 根据 ServerResult 的 返回 码 判 断 是 否 成 功 ， 如 果 成 功 ， 就 扔 出 实际 的 数据 
List<ContactsPageListAdapter.ContactInfo>， 于 是 在 观察 者 的 onNext0 中 就 收 到 了 联系 人 List, 
我 们 依次 把 List 中 的 每 个 联系 人 加 到 “我 的 好 友 ” 组 中 ， 也 就 是 groupNode2 节点 中 ， 最 后 通 
过 Adapter 发 出 通知 ， 使 RecyclerView 重新 加 载 数 据 。 注 意 ， 由 于 是 重新 加 载 所 有 数据 ， 因 此 
需要 先 将 groupNode2 下 的 所 有 子 节点 清空 。 

但 是 ， 现 在 还 不 完美 ， 一 旦 出 错 〈 比 如 网 络 访问 失败 ) ， 定 时 器 就 不 起 作用 了 ! 这 个 问题 
如 何 解 决 呢 ? 请 看 下 节 讲 解 。 


20.3.5 HER 


出 错 后 定时 器 就 失效 的 原因 是 当 Observable 扔 出 错误 事件 时 会 导致 订阅 结束 。 如 何 改 变 
这 个 问题 呢 ? 很 简单 ， 只 需要 使 用 RxJava 重 订阅 机 制 让 Observable 自动 重新 订阅 。 
RxJava 重 订阅 指 的 是 当 Observable 所 包含 的 数据 全 部 处 理 完成 后 ， 本 该 结束 这 个 订阅 ， 


和 新 自动 订阅 (执行 Observer 的 subscribe() 方 法 ) 的 现象 。 


能 让 Observable 开启 重 订阅 机 制 的 方法 有 很 多 ， 比 如 repeat(). repeatWhen(). retryO« 
retryWhen(). repeat 和 retry 的 区 别 是 ，repeat 表示 在 发 出 Complete 事件 时 重新 订阅 GER, 
重 订阅 发 生 时 , Observer 的 onComplete0 并 不 会 执行 ) ; retry 是 发 出 onError 事件 时 重新 订阅 。 
同 理 ，repeatWhen 和 retryWhen0 也 是 这 样 的 区 别 ， 但 由 于 它们 多 了 个 “When”， 因 此 它 
们 是 带 条 件 的 ， 即 在 重 订阅 发 生前 会 先 判断 条 件 。 这 两 个 方法 是 有 参数 的 ， 即 一 个 回调 方法 。 
我 们 需要 实现 这 个 回调 方法 。 


那 我 们 选择 哪 


个 方法 来 设置 重 订阅 呢 ? 当然 是 retry0 了 。 使 用 方式 很 简单 ， 只 需 为 


Observable 对 象 调用 retry0 即 可 : 
// Bg — IERI Observable 


Observable.interval(10, TimeUnit.SECONDS) 
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一 定 要 注意 retry0 调 用 的 时 机 ， 必 须 在 flatMap0 之 后 ， 否 则 重 订阅 不 会 发 生 。 再 要 注意 的 
是 ， 出 现 Error 后 直接 触发 重 订阅 ，onError0 不 会 被 执行 。 

再 解释 一 下 这 里 为 什么 不 用 repeat0， 因 为 定时 器 本 身 就 是 Repeat 方式 执行 ， 再 调用 repeat 
也 看 不 出 什么 差别 。 Repeat 遇 到 Error 事件 时 会 结束 订阅 , 而 我 们 需要 不 停 地 刷新 联系 人 的 状态 。 


20.3.6 ”停止 网 络 连接 


现在 我 们 需要 关注 断 开 网 络 连接 的 时 机 。 因 为 聊天 页 面 是 一 个 Activity， 所 以 在 进入 聊天 
页 面 时 ，MainActivity 会 进入 后 台 ， 会 有 被 Kil 的 危险 。 我 们 的 定时 器 还 在 定时 利用 Retrofit 
向 服务 端 发 出 请 求 ， 万 一 数据 传 来 ，Activity 不 在 了 ， 再 操作 界面 就 会 引起 骨 泪 ， 所 以 需 在 
Activity 临 死 前 把 网 络 请 求 停止 ， 也 要 把 定时 器 停止 。 注 意 ，Retrofit 是 在 MainActivity 中 创建 
的 ， 而 定时 器 是 在 MainFragment 中 创建 的 ， 本 着 互 不 干扰 的 原则 ， 我 们 的 指导 思想 就 是 
MainFragment 负责 停止 定时 器 、MainActivity 负责 停止 网 络 通信 。 

首先 研究 一 下 如 何 停止 RxJava 定时 器 。 停 止 定时 器 其 实 就 是 取消 订阅 ， 需 要 用 到 
Disposable 对 象 : 在 观察 者 的 onSubscribe0 中 获得 ， 把 它 保存 成 外 部 类 的 属性 ， 以 便 在 其 他 方 
法 中 使 用 。 

由 于 是 在 MainFragment 中 创建 的 订阅 ， 所 以 让 它 作为 MainFragment 的 属性 : 

VIF IETEK 

private var observableDisposable: Disposable? = null 

再 改写 一 下 Observer 的 onSubscribe() 方 法 ， 在 其 中 保存 传 入 的 Disposable X} $8 : 


override fun onSubscribe(d: Disposable) ( 
observableDisposable - d 
} 


在 哪里 使 用 它 呢 ? 应 该 在 Fragment 的 界面 被 销毁 之 前 。 参 考 一 下 Fragment 的 生命 周期 ， 
比较 好 的 地 方 就 是 onStop0。onDestroy0O 并 不 合适 ， 因 为 onDestroy0 被 调用 时 ，Fragment 的 
UI 早已 销毁 。 所 以 实现 MainFragment 的 onStop0， 代 码 如 下 : 


override fun onstop() { 


super.onStop() 


//ffiE RxJava ÆI 
observableDisposable?.dispose() 
observableDisposable-null 

} 

但 是 ， 创 建 定时 器 的 代码 放 在 onCreate0 中 合适 吗 ? 其 实 是 不 合适 的 ， 因 为 与 onStop0 对 
应 的 方法 是 onStart0)，onDestroy0 对 应 的 才 是 onCreate0。 执 行 了 onStop0 之 后 不 一 定 会 执行 
onDestroy0， 有 可 能 在 Destroy 之 前 Fragment 又 活 过 来 了 ， 此 时 就 不 会 执行 onCreate0 了 ， 但 
肯定 会 执行 onStart0。 所 以 ， 启 动 定 时 器 的 地 方 应 该 在 onStart0 中 ! 在 MainFragment 中 添加 
onStart0， 将 创建 定时 器 Observable 的 那 段 代码 移 过 来 : 


override fun onStart() { 


// 8g —M IERI IS Observable 
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Observable.interval (10, TimeUnit .SECONDS) 
.flatMap { 
11 IRR Ti Re HI BRERA FIERA 
val service = fragmentListener!!.getChatServcie() 
service.getContacts().map ( 
LLFHBRURA IR EIER, VEAGEIBI EUR IURRÉE 
if (it.retCode == 0) { 
it.data 
) else ( 
throw RuntimeException (it.errMsg) 


) 
).retry() 
-SubscribeOn (Schedulers.computation()) 
-observeOn (AndroidSchedulers.mainThread()) 
.Subscribe (object : Observer«List«ContactsPageListAdapter. 
ContactInfo»?» ( 
override fun onSubscribe(d: Disposable) ( 
observableDisposable - d 
} 


override fun onNext (contactInfos: 
List«ContactsPageListAdapter.ContactInfo») { 
LLBEBBUR A TIRTRSI RIEK” A 
LER, MAEAEA 
tree.clearDescendant (groupNode2); 
for (info in contactInfos) ( 
val node2 = tree.addNode(groupNode2, info, 
R.layout.contacts contact item) 
VIRAT BAT, TERRI, Blir 
node2.isShowExpandIcon = false; 
} 
// AI RecyclerView ETÀ 
contactsAdapter!!.notifyDataSetChanged(); 
) 


override fun onError(e: Throwable) ( 
ILES E 
val errmsg - e.localizedMessage 
Snackbar.make (contentLayout, "大 王 祸 事 了 : $errmsg", 
Snackbar.LENGTH LONG).show(); 
} 


override fun onComplete() { 
$ 
p 


super.onStart() 
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下 面 在 MainActivity 中 断 开 连接 。 实 际 上 在 MainActivity 中 什么 也 不 需要 改动 ， 因 为 
Retrofit 与 RxJava 结合 后 ， 当 RxJava 的 订阅 被 取消 时 ， 即 使 网 络 连接 不 会 马上 断 开 ， 也 不 会 
再 处 理 服务 端的 数据 ， 从 而 也 不 会 操作 界面 了 。 


20.4 发 出 聊天 消息 


注意 ， 我 们 最 终 要 实现 的 是 一 个 聊天 室 App. XE E Web 服务 器 的 App 可 以 互相 发 送 聊天 
消息 ， 每 个 App 都 可 以 看 到 所 有 App 发 出 的 消息 。 

首先 要 把 消息 发 出 去 。 如 何 发 呢 ? 原理 很 简单 : 用 服务 端 认 可 的 形式 组 织 出 消息 对 象 ， 然 
后 借助 Retrofit 发 过 去 。 

服务 端 接收 消息 的 地 址 是 “/apis/upload_message”。 


20.4.1 定义 承载 消息 的 类 
服务 端 定义 了 一 个 消息 类 ,App 端 也 应 该 使 用 相同 的 类 来 承载 消息 数据 ,所 以 添加 如 下 类 : 


data class Message( 
var contactName: String, //RHA MEF 
var time: Long, // A4; E HO [E] 
var content: String//ji E IAZE 

) 

在 前 面 HTTP 通信 的 演示 时 ， 曾 在 ChatActivity 中 创建 了 一 个 ChatMessage 类 ， 现 在 需要 
把 它 去 掉 ， 因 为 我 们 要 使 用 上 面 这 个 类 了 。 去 掉 ChatMessage 之 后 会 出 现 一 些 错误 ， 比 如 
ChatActivity 中 有 一 个 List, 存放 所 有 聊天 消息 , 它 会 因 找 不 到 范 型 参数 ChatMessage 而 报错 ， 
只 需 改 成 Message 即 可 ， 具 体 如 下 : 

class ChatActivity : AppCompatActivity() { 

11 FERA HMR HE 
private val chatMessages = ArrayList«Message»() 

再 比如 将 创建 ChatMessage 对 象 的 语句 : 

var chatMessage = ChatMessage (" 我 " » Date() , msg , true) 

改 为 : 

var chatMessage = Message(" 我 " , Date().time , msg) 

还 有 ，Message 类 中 没有 isMe 这 个 字段 了 ， 所 以 要 判断 一 条 消息 是 本 人 发 出 的 ， 需 要 比 
较 联 系 人 的 名 字 ， 比 如 将 ChatMessagesAdapter 的 方法 getItemViewTypeO0 改 写 为 如 下 代码 GE 
意 加 粗 语句 ) : 

// Er Layout, iL override 此 方法 


override fun getlItemViewType (position:Int):Intí( 
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val message = chatMessages[position]; 
return if(message.contactName == MainActivity.myInfo!!.name) ( 
14I REKA RHK, PAER 


R.layout.chat message right item; 
Jelse( 
LL, EX 


R.layout.chat message left item; 


} 
20.4.2 ”在 接口 中 添加 方法 
在 ChatService 中 添加 接口 ， 用 于 上 传 消息 ， 见 加 粗 的 代码 : 


interface ChatService { 
GMultipart 
GPOST ("/apis/register") 
fun requestRegister( 
GPart fileData: MultipartBody.Part, 
@Query ("name") name: String, 
@Query ("password") password: String 
): Observable«ServerResult«ContactsPageListAdapter.ContactInfo»» 


GGET ("/apis/login") 
fun requestLogin( 
GQuery("name") name: String, 
GQuery("password") password: String? 
): Observable«ServerResult«ContactsPageListAdapter.ContactInfo»» 


GGET ("/apis/get contacts") 
fun getContacts(): Observable«cServerResult«List 
«ContactsPageListAdapter.ContactInfo»»» 
GPOST ("/apis/upload message") 
fun uploadMessage(8Body msg: Message): ObservableXServerResult«Any?»» 
} 


注意 ， 这 个 请 求 是 以 POST 方式 发 出 的 ， 因 为 消息 数据 量 太 大 的 话 ，GET 方式 是 容纳 不 
了 的 。 因 为 这 个 请 求 不 需要 返回 数据 ， 所 以 其 返回 类 型 是 Observable<ServerResult<*>>， 我 们 
不 需要 为 ServerResult 再 设置 范 型 参数 。 另 外 ， 其 参数 是 Message 对 象 ， 我 们 加 了 注解 
“@Body”， 表 示 这 个 参数 要 打包 到 HTTP 的 Body 中 。 


20.4.3 在 ChatActivity 中 初始 化 Retrofit 
下 面 我 们 得 转战 ChatActivity 类 了 。 为 此 类 添加 两 个 字段 ， 用 于 Retrofit 网 络 通信 ， 其 具 


体 作用 不 再 解释 了 : 
AFAR 


private lateinit var retrofit: Retrofit 
private lateinit var chatService: ChatService 
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在 onCreate() 方 法 中 创建 它们 的 实例 : 
//&l& Retrofit HR 


retrofit = Retrofit.Builder() 
//.baseUrl("http://10.0.2.2:8080/") 
-baseUrl ("http://192.168.3.13:8080") //ÆFH PET 
11KO BPIH Call, HrTAUECE BISHER T observable, 
/ / BUE ATIEBE Call ÆR Observable -F Call HARK 
.addCallAdapterFactory (RxJava2CallAdapterFactory.create ()) 
//Json HIE AFE e 
-addConverterFactory (GsonConverterFactory.create ()) 
-build() 

/ LIE EATON R 


chatService = retrofit.create (ChatService::class.java) 
下 面 就 可 以 使 用 它们 了 。 
2044 上传 消息 


改写 发 出 消息 按钮 的 单 击 响应 代码 ， 先 上 传 消息 再 显示 ， 代 码 如 下 : 


LIB BEREEHBI E s EHE, Rihia 
buttonSend.setOnClickListener ( 


//A EditText EHRE WHE 


val msg - editMessage.text.toString() 


/ LOIRE LEER, ERE ETE 


val chatMessage = Message (MainActivity.myInfo!!.name, Date().time, msg) 


/LLLETERÍBER AS 
val observable - chatService.uploadMessage (chatMessage) 
observable.map( 
/L LIBE JE DIEA EI 
if (it.retCode == 0) ( 
LL AACETE S, BEER, KEUTA 
0 
} eise { 
1RR MET. MHF, Æ Observer PAZ 
throw RuntimeException (it.errMsg) 
} 
}.subscribeOn (Schedulers .computation ()) 
-observeOn (AndroidSchedulers.mainThread()) 
.Subscribe( 
// BUB BEEUB Int, JEBIAMA AE map BUIEIIBEES ACE ETICHETTE 8t 
Consumer«Int»( 
/ LIE onNext (), BÆI UTME 
) 
Consumer«Throwable» ( 


//XL i onError(). BIA E EE IR 
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Snackbar.make (chatMessageListView, 
"大 王 祸 事 了 : " + it.localizedMessage, 
Snackbar.LENGTH LONG) 
-SetAction("Action", null) 
.Show() 
) 
Action() ( 
//XI/£ oncomplete(), fh ETH 
u 
Consumer«Disposable» ( 
// T onsubscribe(), fKff disposable DUNG ITI 
uploadDisposable - it 


) 


/ Ins P, MHE RecyclerView PRI 
chatMessages.add (chatMessage) ; 
// f£ view TIED. WA RecyclerView, AEFf—ÍT 
(chatMessageListView.adapter as 
ChatMessagesAdapter).notifyItemInserted(chatMessages.size - 1) 
// il RecyclerView [A] FRZ, DUEB 
chatMessageListView.scrollToPosition(chatMessages.size - 1) 
) 
测试 一 下 ， 消 息 是 可 以 上 传 到 服务 端的 ， 可 以 通过 在 浏览 器 中 访问 地 址 
*http;//localhost:8080/apis/get all messages” 来 查看 服务 端 已 有 的 消息 。 
注意 ，subscribe0 方 法 的 最 后 一 个 参数 “Consumer<Disposable>”， 在 里 面 我 们 将 收 到 的 
Disposable 对 象 保存 了 下 来 ‘uploadDisposable = disposable) . uploadDisposable 是 一 个 字段 ， 
是 ChatActivity 的 。 保 存 它 干什么 ? 前 面 讲 了 ， 是 为 了 在 Activity 死 掉 之 前 取消 网 络 操作 。 所 
以 ， 重 写 ChatActivity 的 onDestroy0， 代 码 如 下 : 
override fun onDestroy() { 
super.onDestroy() 
uploadDisposable?.let( 
it.dispose() 
uploadDisposable - null 


} 

如 果 上 传 不 成 功 怎么 办 ? 仅 提 示 一 下 错误 就 行 了 吗 ? 肯定 不 行 ! 我 们 应 该 重新 上 传 , 直到 
成 功 为 止 。 具 备 这 种 永 不 言 败 精神 的 App 才 算 是 一 个 合格 的 App， 那 如 何 才能 成 为 这 样 令 人 
敬仰 的 App 呢 ? 请 见 下 节 讲 解 。 
204.5 ”失败 重 传 


实现 失败 重 传 ， 有 多 种 方式 。 我 们 已 经 使 用 了 RxJavat+Retrofit， 所 以 我 们 就 使 用 RxJava 的 重 
订阅 机 制 实现 失败 重 传 。 还 记得 前 面 讲 的 重新 订阅 吗 ? 我 们 这 里 要 使 用 repeat 还 是 retry 呢 ? 我 们 
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希望 遇 到 错误 重新 订阅 ， 如 果 成 功 就 结束 订阅 ， 所 以 应 该 用 retry， 将 代码 稍微 改 一 下 : 
observable.retry().map( 


到 此 为 止 ， 发 出 消息 完成 了 。 下 面 获 取消 息 。 


20.5 获取 聊天 消息 


20.5.1 为 ChatService 增加 方法 


获取 消息 与 获取 联系 人 相似 ， 都 需要 重复 地 访问 Web 服务 器 。 我 们 可 以 把 那 部 分 代码 复 
制 过 来 修改 一 下 。 

Web 服务 端 为 获取 消息 提供 了 请 求 路 径 : /apis/get message。 下 面 我 们 为 ChatService 接口 
添加 获取 消息 的 方法 : 

GGET ("/apis/get messages") 

fun getMessagesFromIndex (8Query ("after") index: Int): Observable«ServerResult 
«List«Message»»» 


注意 ， 这 个 方法 有 一 个 参数 “index”， 它 表示 获取 从 这 个 序号 开始 之 后 所 有 的 消息 。 因 
为 获取 的 是 一 堆 消 息 ， 所 以 ServerResult 的 范 型 参数 是 一 个 List. 


20.5.0 ”发 出 请 求 


在 进入 聊天 页 面 时 ， 应 该 立即 显示 出 已 有 的 聊天 信息 ， 所 以 获取 消息 的 代码 应 该 放 在 
ChatActivity 的 onCreate0 中 。 mH, 由 于 要 及 时 显示 新 的 消息 ， 因 此 我 们 还 需要 在 间隔 比较 短 
的 时 间 内 重复 获取 。 这 样 看 来 , 这 里 的 RxJava 调用 与 登录 时 的 架构 一 样 , 需要 两 个 Observable 
配合 ， 代 码 如 下 : 

1ER 2 ERAT AERE — FREIER 

Observable.interval(2, TimeUnit.SECONDS).flatMap( 

// BIEEXERLUIA HEH Observable 
// 838 F—HÉ Message MEL Index 


chatService.getMessagesFromIndex(chatMessages.size) 


-map ( LIBRAS I DS IEBEAE [P] 
if (it.retCode --- 0) ( 
//RBMEH R, BEER, KEUTA 
it.data 
} else { 


LIBUS ARMS T, HIER, Æ Observer PZZ 


throw RuntimeException (it.errMsg) 


H 
).retry() 
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.subscribeOn(Schedulers.computation()) 
.observeon (AndroidSchedulers.mainThread()) 
.subscribe(Consumer«List«Message»?» ( 
//onNext () 
// ILELU IE RecyclerView f, it Æ List«Message»? 
chatMessages.addAll(it!!) 
// f£ view TIU. 3A RecyclerView, Ef—Íír 
chatMessageListView.adapter!!.notifyItemRangeInserted( 
chatMessages.size, chatMessages.size) 
// il RecyclerView [|f] FRZ, DLZRRETEEHLEL 
chatMessageListView.scrollToPosition(chatMessages.size - 1) 
}， Consumer«Throwable» ( e -> 
//onError () 
// REREH, fFAUCNIET. 
Log.e("chatactivity", e.localizedMessage) 
), Action ( //onComplete () 


), Consumer«Disposable» ( disposable -> 
//onSubcribe () 
//fKff downloadDisposable DUBII TR. 
downloadDisposable - disposable 
n 
因为 用 到 了 chatService 变量 ， 所 以 这 段 代码 应 放 在 chatService 被 实例 化 之 后 。 
注意 retry0 的 调用 时 机 ， 它 必须 放 在 flatMap0 之 后 。 因 为 flatMap 会 产生 新 的 Observable 
对 象 ， 我 们 需 让 这 个 新 的 Observable 有 retry 机 制 。 还 要 注意 downloadDisposable 变量 ， 它 是 
ChatActivity 的 一 个 属性 ， 在 onDestroyO 中 使 用 : 


override fun onDestroy() { 

super.onDestroy() 

uploadDisposable?.let( 
it.dispose() 
uploadDisposable - null 

) 

downloadDisposable?.let ( 
it.dispose() 
downloadDisposable - null 


} 

还 有 一 个 问题 ， 在 上 传 消息 的 代码 中 ,我 们 调用 Date0 构 建 了 一 个 日 期 对 象 ， 这 个 类 的 使 
用 需要 导入 包 “java.util”， 而 这 个 包 中 也 有 一 个 名 为 Observable 的 类 ， 这 就 会 导致 想 使 用 
RxJava 中 的 Observable 时 ， 实 际 上 却 使 用 了 ava.util 中 的 Observable。 解 决 方案 是 使 用 类 的 全 
名 ， 比 如 将 Date 改 为 javautiLData， 当 然 还 要 把 “import java.util” 删 掉 。 

聊天 功能 到 此 就 实现 了 。 开 启 多 个 虚拟 机 后 ， 它 们 真 的 可 以 聊天 ! 虽然 这 个 App 还 有 很 
多 缺点 ， 但 是 它 的 实现 还 是 经 历 了 无 数 困难 ， 并 倾注 了 我 们 的 心血 和 汗水 ， 最 后 收获 颇 丰 。 
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